CSS Selector Reference

CSS Selector Reference

CSS Selector Reference

CSS Selectors allow us to target our HTML elements in order to style them with the CSS Properties. Selectors are patterns that target an HTML element by type, by class and id, hierarchal relationships of elements and pseudo-classes to supply us with a great deal of selection logic when styling our web documents. Each CSS level builds off of the previous level so you can apply all selectors.

CSS 1 Selectors

CSS1 Selector	Syntax and Code Examples
type selector	X { }
group selector	X, Y { }
descendant combinator	X Y { }
class selector	X.class { }
id selector	X#id { }
first-line selector	X::first-line { }
first-letter selector	X::first-letter { }
active Selctor	X:active { }
hover selector	X:hover { }
link selector	X:link { }
visited selector	X:visited { }

CSS 2 Selectors

CSS2 Selector	Syntax and Code Examples
universal selector	* { }
child combinator	X > Y { }
adjacent sibling combinator	X + Y { }
after selector	X::after { }
before selector	X::before { }
lang selector	X:lang { }
first-child selector	X:first-child { }
attribute selector	X[att] { }

CSS 3 Selectors

WARNING: You will notice that some CSS3 selectors WILL NOT WORK in all browsers yet. This is because CSS3 has not become a web standard yet and browser makers are slowly adding the new CSS3 modules to the various browsers. When CSS3 becomes a standard we will update our library to reflect that and remove any CSS3 warnings in place.

CSS3 Selector	Syntax and Code Examples
general sibling combinator	X ~ Y { }
not selector	X:not(Y) { }
target selector	X:target { }
enabled selector	X:enabled { }
disabled selector	X:disabled { }
checked selector	X:checked { }
root selector	X:root { }
nth-child selector	X:nth-child(N) { }
nth-last-child selector	X:nth-last-child(N) { }
nth-of-type selector	X:nth-of-type(N) { }
nth-last-of-type selector	X:nth-last-of-type(N) { }
last-child selector	X:last-child { }
first-of-type selector	X:first-of-type { }
last-of-type selector	X:last-of-type { }
only-child selector	X:only-child { }
only-of-type selector	X:only-of-type { }
empty selector	X:empty { }

Tweet