css selector reference code example

Example 1: css selectors

* {
color: pink;
}
h1, h2 {Select all h1 and h2}
li a {select all anchor inside a list}
h1 + p {select all p placed after an h1}
div > li {all li directly in a div}

Example 2: 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 */

Example 3: 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 4: 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