Computers & ProgrammingCSSCSS3Web Development

CSS Selectors Reference

CSS uses selectors to find elements in the document tree. Selectors are simply patterns used to select the elements you want to style.

Selector represents a structure. This structure can be used as a condition that determines which elements a selector matches in the document tree.

SelectorDescriptionCSS
*Universal element, any element2
EAn element of type E1
E FSelects an F element descendant of an E element1
E, Fselects an E and F element1
E > FSelects an F element child of an E element2
E + FSelects an F element immediately preceded by an E element2
E ~ FSelects an F element preceded by an E element3
[foo]Selects element with a “foo” attribute2
[foo="bar"]Selects element whose “foo” attribute value is exactly equal to “bar”2
[foo~="bar"]Selects element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”2
[foo^="bar"]Selects element whose “foo” attribute value begins exactly with the string “bar”3
[foo$="bar"]Selects element whose “foo” attribute value ends exactly with the string “bar”3
[foo*="bar"]Selects element whose “foo” attribute value contains the substring “bar”3
[foo|="en"]Selects element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en”2
:rootSelects the root of the document3
:nth-child(n)Selects a user interface element which is enabled or disabled element, the n-th child of its parent3
:nth-last-child(n)Selects a user interface element which is enabled or disabled element, the n-th child of its parent, counting from the last one3
:nth-of-type(n)Selects a user interface element which is enabled or disabled element, the n-th sibling of its type3
:nth-last-of-type(n)Selects a user interface element which is enabled or disabled element, the n-th sibling of its type, counting from the last one3
:first-childSelects a user interface element which is enabled or disabled element, the first child of its parent2
:last-childSelects a user interface element which is enabled or disabled element, the last child of its parent3
:first-of-typeSelects a user interface element which is enabled or disabled element, the first sibling of its type3
:last-of-typeSelects a user interface element which is enabled or disabled element, the last sibling of its type3
:only-childSelects a user interface element which is enabled or disabled element, the only child of its parent3
:only-of-typeSelects a user interface element that is enabled or disabled element, the only sibling of its type3
:emptySelects a user interface element that is enabled or disabled element that has no children3
:linkSelects unvisited links1
:visitedSelects visited links1
:activeSelects active links1
:hoverSelects on mouseover1
:focusSelects element which has a focus2
:targetSelects element being the target of the referring URI3
:lang(en)Selects element in language “en”2
:enabledSelects a user interface element that is enabled3
:disabledSelects a user interface element that is disabled3
:checkedSelects a user interface element that is checked3
:first-lineSelects the first formatted line of an element1
:first-letterSelects the first formatted letter of an element1
:beforeSelects generated content before an element2
:afterSelects generated content after an element2
.myclassSelects element whose class is “myclass”1
#myidSelects element with ID equal to “myid”1
:not(s)Selects element that does not match simple selector s3
::selectionSelects the portion of an element that is selected by a user3

In CSS1 and CSS2, pseudo-elements start with a colon :, just like pseudo-classes. In CSS3, pseudo-elements start with a double colon ::, which differentiates them from pseudo-classes.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top