CSS Selectors

Type Selector :  Select elements by type
e.g.  Select all h1 elements and set the color to red
h1 {
  color : red;
}

ID Selector :  Select elements by id
e.g.  Select all elements with id equal to error
#error {
  color : red;
}

Descendant Selector :  Select element inside another element
e.g.  Select all <strong> elements that are inside <p>
p strong {
  color : red;
}

e.g.  Select all <p> elements that are inside element with id container
#container p {
  color : red;
}

Class Selector :  Select element by their class
e.g.  Select all elements with class set to warning
.warning {
  color : yellow;
}

Combining Class Selector :  Select element by their class
e.g.  Select <p> elements with class set to warning
p.warning {
  color : yellow;
}

e.g.  Select <p> elements with class set to warning which are inside <div>
div p.warning {
  color : yellow;
}

Combining Type Selector by Comma :  Combine selectors by comma
e.g.  Select all <p> elements and all elements with id warning
p,  #warning {
  color : yellow;
}

Universal Selector :  Select all elements
e.g.  Select all elements
*  {
  color : yellow;
}

e.g.  Select all elements which are inside elements with class warning
.warning *  {
  color : yellow;
}

Adjacent Sibling Selector :  Select an element that directly follows another element
e.g.  Select <a> element that directly follows <div>
div + a  {
  color : yellow;
}

e.g.  Select first element (any element because of *) that directly follows <div>
div + *  {
  color : yellow;
}

General Sibling Selector :  Select elements that follows another element. This is different from Adjacent Sibling Selector in that, it selects all elements instead of one.
e.g.  Select all <a> element that directly follows <div>
div ~ a  {
  color : yellow;
}

Child Selector :  Select direct children of an element.
e.g.  Select <p> elements that are children of elements with class=error
.error > p  {
  color : yellow;
}

First Child Pseudo-Selector :  Select a first element inside of another element.
e.g.  
:first-child             // Select all first-child elements
p:first-child          // Select all first-child <p> elements
div p:first-child    // Select all first-child <p> elements that are inside div

Only Child Pseudo-Selector :  Select an element that is the only element inside of another element.
e.g.  
blog p:only-child      // Select all <p> elements that are the only childs of its parent (blog)
div:only-child           // Select <div> elements that are the only child of other element.

Last Child Pseudo-Selector :  Select the last element inside of another element.
e.g.  
:last-child             // Select all last-child elements
p:last-child          // Select all last-child <p> elements
div p:last-child    // Select all last-child <p> elements that are inside div

Nth Child Pseudo-Selector :  Select an element by its order in another element.
e.g.  Select second <p> element inside div
div  p:nth-child(2)  {
  color : yellow;
}

Nth Last Child Pseudo-Selector :  Select an element by its order in another element, counting from back.
e.g.  Select second <p> element inside div in reverse order
div  p:nth-last-child(2)  {
  color : yellow;
}

First of Type Selector :  Select the first element of specific type
e.g.  <div class="parent">
           <p>Child</p>
           <div>Child</div>
           <div>Child</div>
        </div>

Select  first <div> child element inside div with class parent

.parent  div:first-of-type  {
  color : yellow;
}

Nth of Type Selector :  Select a specific element based on its type and order in another element - or even or odd instances of that element.
e.g.  
div:nth-of-type(2)                  // Select the second instance of a div
.example:nth-of-type(odd)    // Select all odd instances of the element with example class 

Only of Type Selector :  Select elements that are the only one of their types within of their parent element.
e.g.  
p span:only-of-type             // Select <span> within any <p> if it is the only span in there

Last of Type Selector :  Select the last element of a specific type
e.g.  
p span:last-of-type             // Select last <span> within any <p>

Empty Selector :  Select elements that have no children
e.g.  Select all div with no children
div:empty  {
  color : yellow;
}

Attribute Selector :  Select all elements that have a specific attribute
e.g.  
a[href]       // Select all <a> elements that have a href="anyvalue" attribute

Attribute Value Selector :  Select all elements that have a specific attribute value
e.g.  
input[type="checkbox"]      // Select all checkbox input elements

Attribute Starts with Selector :  Select all elements that have attribute value starting with certain characters
e.g.  
div[type^="sport"]      // Select all div elements which has a type property that has value starting with sport

Attribute Ends with Selector :  Select all elements that have attribute value ends with certain characters
e.g.  
img[src$="*.jpg"]      // Select all images with .jpg extension

Attribute Wildcard Selector :  Select all elements that contains specific characters anywhere
e.g.  
[class*="heading"]      // Select all elements with heading in their class name

Note : To run CSS Selectors in Chrome, use the following syntax in developer console

$$(‘selector value’)

For XPath queries, use the following syntax

$x(‘XPath value’)