selectors in css 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: descendent selector in css

The descendant combinator — typically represented by a single space ( ) 
character — combines two selectors such that elements matched by the second
selector are selected if they have an ancestor 
(parent, parent's parent, parent's parent's parent, etc) 
element matching the first selector. 

example: 
  h1 ul {
    border : 1px solid #f1f1f1;
}
Explanation: This above CSS code snippet will select all the 'ul' (unordered list)
			 tags which are preceeded by an 'h1' (header tag).
/*the best way to understand is to practice by implemetation.
Create a html file with lots of h1 and ul elements to understand by
implementing CSS on them*/

Example 3: css select descendant with class

Select an element with the ID "id" and the class "class":
#id.class {
}
example:
<div>
  <strong id="id" class="class">
      Foobar
  </strong>
  <strong class="class">
      Foobar
  </strong>
</div>
=> Will select the first <strong> element

Select all elements with the class "class",
which are decendents of a element with an ID of "id":
#id .class {
}
example:
<div id="id">
	<strong class="class">Foobar</strong>
</div>
=> Will select the <strong> element

Example 4: 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 5: 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 6: 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