The 30 CSS Selectors You Must Memorize Cheat Sheet

A Programming › CSS cheat sheet in English by dimitrios

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 Originally by Jeffrey Way, 9 Jun 2011

CSS Selectors

41,807 views 9,561 downloads 28 Sep 2016 History

PRs

Download

4.1 avg · 2 ratings

*

Every element on the page.

#X

Target by id

.X

.error {
color: red;
}
Class selector

X Y

li a {
text-decoration: none;
}
Descendant selector.

X

a {
color: red;
}
All elements of page.

X:visited and X:link

pseudo-classes

X + Y

Adjacent selector only if the element is Y immediately preceded by X.

X > Y

Only distinct children.

X ~ Y

Less strict sibling combinatior, Y elements that follow X elements.

X[attr]

a[title] {
color: green;
}
X elements that have an attr attribute. For example anchor elements with title attribute.

Other attribute selectors

X[href="foo"] /* href == foo */
X[href*="foo"] /* foo somewhere in href */
X[href^="foo"] /* href begins with foo  */
X[href$="foo"] /* href ends with foo  */

X[data-*="foo"]

a[data-filetype="image"] {
color: red;
}
Custom attributes

X[foo~="bar"]

a[data-info_{="external"] {}
color: red;
}
a[data-info="image"] {
border: 1px solid black;
}
and <a href="path/to/image.jpg" data-info="external image">
For spaced-separated list of values.

X:checked

pseudo-class

X:before

X:after

X:hover

X:not(selector)

X:pseudoElement

x::first-line
x::first-letter

X:nth-child(n)

Integer n is not zero based, so first element is 1.
2n for every two items.

X:nth-last-child(n)

Other nths

X:nth-of-type(n)

X:nth-last-of-type(n)

X:first-child

X:last-child

X:only-child

X:only-of-type / no siblings within parent container /

X:first-of-type

Origin

Content has been summarized from this article here:
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 by Jeffrey Way on 9 Jun 2011.

Badges

Useful Cheat Sheet Great Cheat Sheet Nice Cheat Sheet Good Cheat Sheet Appreciated Cheat Sheet Downloaded from Unusual Locations × 6

Comments

No comments yet.