<b> </b>
Type SelectorSelect elements by type
e.g. Select all h1 elements and set the color to red
h1 {
- color : red;*
}
ID SelectorSelect elements by id
e.g. Select all elements with id* *equal to error
#error {
- color : red;*
}
<i> </i>
Descendant SelectorSelect element inside another element
e.g. Select all <strong> elements that are inside <p>
p strong {
- color : red;*
}
<i> </i> e.g. Select all <p> elements that are inside element with id container
#container p {
- color : red;*
}
Class SelectorSelect element by their class
e.g. Select all elements with class set to warning
.warning {
- color : yellow;*
}
<i> </i>
Combining Class SelectorSelect element by their class
e.g. Select <p> elements with class set to warning
p.warning {
- color : yellow;*
}
<i> </i>
e.g. Select <p> elements with class set to warning* *which are inside <div>
div p.warning {
- color : yellow;*
}
<i> </i>
Combining Type Selector by CommaCombine selectors by comma
e.g. Select all <p> elements and all elements with id warning
p, #warning {
- color : yellow;*
}
<i> </i>
Universal SelectorSelect all elements
e.g. Select all elements
** {*
- color : yellow;*
}
<i> </i> e.g. Select all elements which are inside elements with class warning
.warning * {
- color : yellow;*
}
<i> </i>
Adjacent Sibling SelectorSelect an element that directly follows another element
e.g. Select <a> element that directly follows <div>
div + a {
- color : yellow;*
}
<i> </i> *e.g. Select first element (any element because of ) that directly follows <div>
div + * {
- color : yellow;*
}
<i> </i> General Sibling SelectorSelect 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;*
}
<i> </i> Child SelectorSelect direct children of an element.
e.g. Select <p> elements that are children of elements with class=error
.error > p {
- color : yellow;*
}
<i> </i>
First Child Pseudo-SelectorSelect 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
<i> </i> Only Child Pseudo-SelectorSelect 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.
<i> </i> Last Child Pseudo-SelectorSelect 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
<i> </i>
Nth Child Pseudo-SelectorSelect 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-SelectorSelect 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;*
}
<i> </i>
First of Type SelectorSelect the first element of specific type
e.g. <div class=“parent”>
-
<p>Child</p>*
-
<div>Child</div>*
-
<div>Child</div>*
-
</div>*
<i> </i> Select first <div> child element inside div with class parent
<i> </i> .parent div:first-of-type {
- color : yellow;*
}
<i> </i>
Nth of Type SelectorSelect 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 SelectorSelect 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 SelectorSelect the last element of a specific type
*e.g. *
p span:last-of-type // Select last <span> within any <p>
<i> </i>
Empty SelectorSelect elements that have no children
e.g. Select all div with no children
div:empty {
- color : yellow;*
}
<i> </i>
Attribute SelectorSelect all elements that have a specific attribute
*e.g. *
a[href] // Select all <a> elements that have a href=“anyvalue” attribute
<i> </i>
Attribute Value SelectorSelect all elements that have a specific attribute value
*e.g. *
input[type=“checkbox”] // Select all checkbox input elements
Attribute Starts with SelectorSelect 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
<i> </i> Attribute Ends with SelectorSelect all elements that have attribute value ends with certain characters
*e.g. *
img[src$=“.jpg”]** // Select all images with .jpg extension*
<i> </i>
Attribute Wildcard SelectorSelect all elements that contains specific characters anywhere
*e.g. *
[class=“heading”]** // Select all elements with heading in their class name*
<i> </i> Note : To run CSS Selectors in Chrome, use the following syntax in developer console
<i> </i> $$(‘selector value’)
<i> </i> For XPath queries, use the following syntax
<i> </i> $x(‘XPath value’)