css selectors

/*
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 */

/* Answer to: "css child selector" */

/*
  Child Selector is used to match all the elements which are child
  of a specified element. It gives the relation between two
  elements. The element > element selector selects those elements
  which are the children of specific parent.

  The operand on the left side of > is the parent and the operand on
  the right is the children element.
*/

#idOfParentElement > .classOfChildElement {
  /* Your CSS Properties for the child element */
}

/* If you want to get all child elements of the parent, use "*" */

.classOfParentElement > * {
  /* Your CSS Properties for the child elements */
}

/* If you want to get all <span> elements of the parent, use "span" */

body > span {
  /* Your CSS Properties for the child elements */
}

In this example only <p> elements with class="center" will be center-aligned: 

p.center {
  text-align: center;
  color: red;
}

h1, h2, p {
  text-align: center;
  color: red;
}

* {
  text-align: center;
  color: blue;
}

p.center {
  text-align: center;
  color: red;
}

#para1 {
  text-align: center;
  color: red;
}

/*
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 */

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.

ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

//Will select all li under ul
//<ul>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>
Affected li = 4
ul li { margin: 0 0 5px 0; }

//Will only select the childer li of the ul
//<ul>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>
Affected li = 1
ul > li { margin: 0 0 5px 0; }