| Selector | Selector
Example |
Example Description |
CSS |
| . class |
. intro |
Select all elements of class= "Intro". |
1 |
| #ID |
#firstname |
Select all elements of id= "FirstName". |
1 |
| * |
* |
Selects all elements. |
2 |
| Element |
P |
Select all <p> elements. |
1 |
| element,element |
Div,p |
Select all <div> elements and all <p> elements. |
1 |
| element element |
Div p |
Select all <p> elements inside the <div> element. |
1 |
| element>element |
Div>p |
Selects all <p> elements of the parent element for the <div> element. |
2 |
| element+element |
Div+p |
Select all <p> elements immediately after the <div> element. |
2 |
| [attribute] |
[Target] |
Selects all elements with the target property. |
2 |
| [attribute=value] |
[Target=_blank] |
Select all elements of target= "_blank". |
2 |
| [attribute~=value] |
[Title~=flower] |
Select all elements of the title property that contain the word "flower". |
2 |
| [attribute|=value] |
[Lang|=en] |
Select all elements with the Lang attribute value beginning with "en". |
2 |
| : Link |
A:link |
Select all links that have not been accessed. |
1 |
| : Visited |
a:visited |
Select all links that have been visited. |
1 |
| : Active |
A:active |
Select the active link. |
1 |
| : hover |
A:hover |
Select the link on which the mouse pointer is located. |
1 |
| : Focus |
Input:focus |
Select the input element that gets the focus. |
2 |
| : First-letter |
P:first-letter |
Select the first letter of each <p> element. |
1 |
| : First-line |
P:first-line |
Select the first line of each <p> element. |
1 |
| : First-child |
P:first-child |
Select each <p> element that belongs to the first child element of the parent element. |
2 |
| : Before |
P:before |
Insert content before the contents of each <p> element. |
2 |
| : After |
P:after |
Insert content after each <p> element's content. |
2 |
| : lang (language) |
P:lang (IT) |
Select each <p> element with a value for the lang attribute that starts with "it". |
2 |
| element1~element2 |
P~ul |
Select each <ul> element that has a <p> element in front of it. |
3 |
| [attribute^=value] |
a[src^= "https"] |
Select each <a> element whose src attribute value begins with "https". |
3 |
| [attribute$=value] |
A[src$= ". pdf"] |
Select all <a> elements whose src attribute ends with ". pdf". |
3 |
| [attribute*=value] |
a[src*= "ABC"] |
Select each <a> element that contains the "ABC" substring in its src attribute. |
3 |
| : First-of-type |
P:first-of-type |
Select each <p> element that belongs to the first <p> element of its parent element. |
3 |
| : Last-of-type |
P:last-of-type |
Select each <p> element that belongs to the last <p> element of its parent element. |
3 |
| : Only-of-type |
P:only-of-type |
Select each <p> element that belongs to the <p> element that is unique to its parent element. |
3 |
| : Only-child |
P:only-child |
Selects each <p> element that belongs to the unique child element of its parent element. |
3 |
| : Nth-child (n) |
P:nth-child (2) |
Selects each <p> element that belongs to the second child element of its parent element. |
3 |
| : Nth-last-child (n) |
P:nth-last-child (2) |
Ditto, counting from the last child element. |
3 |
| : Nth-of-type (n) |
P:nth-of-type (2) |
Select each <p> element that belongs to the second <p> element of its parent element. |
3 |
| : Nth-last-of-type (n) |
P:nth-last-of-type (2) |
Ditto, but starts counting from the last child element. |
3 |
| : Last-child |
P:last-child |
Select each <p> element that belongs to the last child element of its parent element. |
3 |
| : Root |
: Root |
Select the root element of the document. |
3 |
| : Empty |
P:empty |
Select each <p> element that has no child elements (including text nodes). |
3 |
| : Target |
#news: Target |
Select the currently active #news element. |
3 |
| : Enabled |
Input:enabled |
Select each of the enabled <input> elements. |
3 |
| :d isabled |
Input:disabled |
Select each of the disabled <input> elements |
3 |
| : Checked |
Input:checked |
Select each <input> element that is selected. |
3 |
| : Not (selector) |
: Not (P) |
Select each element of the non-<p> element. |
3 |
| :: Selection |
:: Selection |
Select the part of the element that is selected by the user. |
3 |