CSS Selectors
CSS selectors are patterns used to select the element(s) you want to style.
Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes).
Selector | Selector Example | Selector Description | Browser Support | Try Yourself |
---|---|---|---|---|
* | * | Selects all elements |
|
Try Yourself |
#id | #myName | Selects the element with id="myName" |
|
Try Yourself |
.class | .myProfile | Selects all elements with class="myProfile" |
|
Try Yourself |
element element | div span | Selects all <span> elements inside <div> elements |
|
Try Yourself |
element | div | Selects all <div> elements |
|
Try Yourself |
:link | a:link | Selects all unvisited links |
|
Try Yourself |
element > element | div > ul | Selects all <ul> elements where the parent is a <div> element |
|
Try Yourself |
element1~element2 | div~ul | Selects every <ul> element that are preceded by a <p> element |
|
Try Yourself |
:hover | a:hover | Selects links on mouse over |
|
Try Yourself |
:after | a:after | Insert content after every <a> element |
|
Try Yourself |
:not(selector) | :not(p) | Selects every element that is not a <p> element |
|
Try Yourself |
::selection | ::selection | Selects the portion of an element that is selected by a user |
|
Try Yourself |
:first-letter | p:first-line | Selects the first line of every <p> element |
|
Try Yourself |
:first-line | p:first-line | Selects the first line of every <p> element |
|
Try Yourself |
:first-child | ul li:first-child | Selects every <ul><li> element that is the first child of its parent |
|
Try Yourself |
:last-child | ul li:last-child | Selects every <ul><li> element that is the last child of its parent |
|
Try Yourself |
:nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
|
Try Yourself |
:nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
|
Try Yourself |
:nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
|
Try Yourself |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
|
Try Yourself |
:disabled | input:disabled | Selects every disabled <input> element |
|
Try Yourself |
:enabled | input:disabled | Selects every enabled <input> element |
|
Try Yourself |
:target | #target:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
|
Try Yourself |
:empty | div:empty | Selects every <div> element that has no children (including text nodes) |
|
Try Yourself |
:root | :root | Selects the document�s root element |
|
Try Yourself |
:only-child | p:only-child | Selects every <p> element that is the only child of its parent |
|
Try Yourself |
:only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
|
Try Yourself |
:last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
|
Try Yourself |
:first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
|
Try Yourself |
[attribute^=value] | div[class^="text"] | Selects every <div> element whose src attribute value begins with "text" |
|
Try Yourself |
[attribute*=value] | div[class*="text"] | Selects every <div> element whose src attribute value contains the substring "text" |
|
Try Yourself |
[attribute$=value] | div[class$="text"] | Selects every <div> element whose src attribute value ends with "text" |
|
Try Yourself |
[attribute] | a[target] | Selects all elements with a target attribute |
|
Try Yourself |
[attribute~=value] | [title~=google] | Selects all elements with a title attribute containing the word "flower" |
|
Try Yourself |
[attribute=value] | a[target=_blank] | Selects all elements with target="_blank" |
|
Try Yourself |
:focus | input:focus | Selects the input element which has focus |
|
Try Yourself |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) |
|
Try Yourself |
:before | a:before | Insert content before the content of every <p> element |
|
Try Yourself |
:active | a:active | Selects the active link |
|
Try Yourself |
element,element | div,p | Selects all <div> elements and all <p> elements |
|
Try Yourself |