# CSS Selectors
# Selectors & combining Selectors
| Selector | Example | Info | Learn CSS tutorial |
|---|---|---|---|
| Type selector (opens new window) | h1 | All <h1> - Tags | Type selectors (opens new window) |
| Class selector (opens new window) | .box | - All Elements with class="box" | Class selectors (opens new window) |
ul.important | All <ul> Elements with class="important" | ||
#big.wide | Elements with id="big" and class="wide" | ||
li.big.elegant | All <li> Elements with class="big" and class="elegant" | ||
| ID selector (opens new window) | #unique | Elements with id="unique" | ID selectors (opens new window) |
| Universal selector (opens new window) | * | All Elements selects everything, but cascading is no longer working! - be careful | Universal selector (opens new window) |
| Comma Combinator | p, .fun | All <p>Elements and all Elements with class="fun" | |
a, p, div | All <a>, <p>and <div> Elements | ||
| Descendant combinator (opens new window) | p strong | - All <strong> Elements inside any <p> - | Descendant combinator (opens new window) |
#fancy span | Any <span> inside Element with id="fancy | ||
.box p | Any <p> inside Element with class="box" - | ||
div * | All elements inside any <div> | ||
ul.fancy * | Every element inside all <ul class="fancy"> elements. | ||
#list li:first-child a | All <a> Elements inside <li> that are first-child from #list | ||
| The last element after the spaces is selected - doesn't have to be a direct child | |||
| Adjacent sibling combinator (opens new window) | h1 + p | Every <p> Element that directly follows a <h1> | Adjacent sibling (opens new window) |
p + .intro | Every element with class="intro" that directly follows a <p> | ||
| General sibling combinator (opens new window) | p ~ span | All <span> that follow a <p> | General sibling (opens new window) |
| Child combinator (opens new window) | div > span | All <span> that are direct children of<div> | Child combinator (opens new window) |
# Pseudo-Class Selectors (opens new window)
Pseudo-classes Tutorial (opens new window)
| Selector | Example | Info |
|---|---|---|
| :first-child | :first-child | All first child Elements. |
p:first-child | All first child <p> elements | |
div p:first-child | all first child <p> elements that are in a <div> | |
| :only-child | span:only-child | <span> elements that are the only child of some other element. |
ul li:only-child | The only <li> element that are in a <ul>. | |
| :last-child | span:last-child | All last child <span> Elements |
ul li:last-child | last <li> elements inside of any <ul> | |
| :nth-child(A) | :nth-child(8) | Every element that is the 8th child of another element. |
div p:nth-child(2) | Second <p> in every <div> | |
| :nth-last-child(A) | :nth-last-child(2) | All second-to-last child elements |
| :first-of-type | span:first-of-type | First <span> in any element. |
| :nth-of-type(A) | div:nth-of-type(2) | second instance of a <div> |
.example:nth-of-type(odd) | All odd instances of a the example class. | |
| :nth-of-type(An+B) | span:nth-of-type(6n+2) | every 6th instance of a <span>, starting from (and including) the second instance. |
| :only-of-type | p span:only-of-type | >span< within any >p< if it is the only >span< in there. |
| :last-of-type | div:last-of-type | last >span< in every p |
| :empty | div:empty | all empty >div< elements |
| :not(X) | :not(#fancy) | all elements that do not have id="fancy" |
div:not(:first-child) | every >div< that is not a first child | |
:not(.big, .medium) | all elements that do not have class="big" or class="medium" | |
| Other Pseudo-Classes... | :first-line``:first-letter``:hover``:active``:focus``:first``:checked... | Pseudo-class selectors (opens new window) |
# Attribute selectors (opens new window)
Attribute Selector Tutorial (opens new window)
| Selector | Example | Info |
|---|---|---|
| [attribute] | a[href] | all <a> elements that have a href="anything" attribute |
[type] | all elements that have a type="anything" attribute | |
input[disabled] | all >input< elements with the disabled attribute | |
| [attribute="value"] | input[type="checkbox"] | All checkbox input elements |
| Attribute Starts With Selector [attribute^="value"] | .toy[category^="Swim"] | Elements with class toy and either category="Swimwear or category="Swimming" |
| Attribute Ends With Selector [attribute$="value"] | img[src$=".jpg"] | All .jpg images |
| Attribute Wildcard Selector [attribute*="value"] | img[src*="/thumbnails/"] | All image elements that show images from the "thumbnails" folder |
[class*="heading"] | All elements with "heading" in their class, like class="main-heading" and class="sub-heading" | |
| Other Attribute Selectors... | Attribute selector (opens new window) | Attribute selectors (opens new window) |
# Pseudo-element selectors (opens new window)
Pseudo-Element Selector Tutorial (opens new window)
| Example |
|---|
p::first-line |
::first-letter |
::after |
::before |
::placeholder... |
# Selector Links
← CSS - Basics Color →