what is a selector in css code example
Example 1: what is a css selector
h1 {
color: red;
}
In this CSS code example that sets the color of all h1s to red
the "h1" is the selctor because we are applying this style to
the h1s.
Example 2: what is css selector
div { color: red; } // the "div" in .css is a selector targeting all <div> elements
simpleSelector = document.querySelectorAll()("div"); // all divs
complexSelector = document.querySelector("div.user-panel.main input[name='login']") // the first <input> element with the name "login" (<input name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned
Example 3: css selector
/*
Selector Example Example Description
*/
.class .intro /* Selects all elements with class="intro" */
.class1.class2 .name1.name2 /* Selects all elements with both name1 and name2 set within its class attribute */
.class1 .class2 .name1 .name2 /* Selects all elements with name2 that is a descendant of an element with name1 */
#id #firstname /* Selects the element with id="firstname" */
* * /* Selects all elements */
element p /* Selects all <p> elements */
element.class p.intro /* Selects all <p> elements with class="intro" */
element,element div, p /* Selects all <div> elements and all <p> elements */
element element div p /* Selects all <p> elements inside <div> elements */
element>element div > p /* Selects all <p> elements where the parent is a <div> element */
element+element div + p /* Selects all <p> elements that are placed immediately after <div> elements */
element1~element2 p ~ ul /* Selects every <ul> element that are preceded by a <p> element */
[attribute] [target] /* Selects all elements with a target attribute */
[attribute=value] [target=_blank] /* Selects all elements with target="_blank" */
[attribute~=value] [title~=flower] /* Selects all elements with a title attribute containing the word "flower" */
[attribute|=value] [lang|=en] /* Selects all elements with a lang attribute value starting with "en" */
[attribute^=value] a[href^="https"] /* Selects every <a> element whose href attribute value begins with "https" */
[attribute$=value] a[href$=".pdf"] /* Selects every <a> element whose href attribute value ends with ".pdf" */
[attribute*=value] a[href*="w3schools"] /* Selects every <a> element whose href attribute value contains the substring "w3schools" */
:active a:active /* Selects the active link */
::after p::after /* Insert something after the content of each <p> element */
::before p::before /* Insert something before the content of each <p> element */
:checked input:checked /* Selects every checked <input> element */
:default input:default /* Selects the default <input> element */
:disabled input:disabled /* Selects every disabled <input> element */
:empty p:empty Selects /* every <p> element that has no children (including text nodes) */
:enabled input:enabled /* Selects every enabled <input> element */
:first-child p:first-child /* Selects every <p> element that is the first child of its parent */
::first-letter p::first-letter /* Selects the first letter of every <p> element */
::first-line p::first-line /* Selects the first line of every <p> element */
:first-of-type p:first-of-type /* Selects every <p> element that is the first <p> element of its parent */
:focus input:focus /* Selects the input element which has focus */
:hover a:hover /* Selects links on mouse over */