CSS Selectors
By CSS Rules allow you to style many page elements easily and succinctly. In order to fully harness the power off CC rules, we must first understand and master the art of CSS selectors. Start by learning the basic selectors and then learn how to craft combine selectors for additional specificity:
CSS Selector | Description |
.intro | Selects all elements with class="intro" |
#firstname | Selects the element with id="firstname" |
* | Selects all elements |
p | Selects all <p> elements |
div, p | Selects all <div> elements and all <p> elements |
div p | Selects all <p> elements inside <div> elements |
div > p | Selects all <p> elements where the parent is a <div> element |
div + p | Selects all <p> elements that are placed immediately after <div> elements |
p ~ ul | Selects every <ul> element that are preceded by a <p> element |
[target] | Selects all elements with a target attribute |
[target=_blank] | Selects all elements with target="_blank" |
[title~=flower] | Selects all elements with a title attribute containing the word "flower" |
[lang|=en] | Selects all elements with a lang attribute value starting with "en" |
a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |
a:active | Selects the active link |
p::after | Insert something after the content of each <p> element |
p::before | Insert something before the content of each <p> element |
input:checked | Selects every checked <input> element |
input:disabled | Selects every disabled <input> element |
p:empty | Selects every <p> element that has no children (including text nodes) |
p:first-child | Selects every <p> element that is the first child of its parent |
p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
input:focus | Selects the input element which has focus |
a:hover | Selects links on mouse over |
p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) |
p:last-child | Selects every <p> element that is the last child of its parent |
p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
a:link | Selects all unvisited links |
:not(p) | Selects every element that is not a <p> element |
p:nth-child(2) | Selects every <p> element that is the second child of its parent |