Show Menu

The 30 CSS Selectors You Must Memorize Cheat Sheet by

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

*

Every element on the page.

#X

Target by id

.X

.error {
color: red;
}
Class selector

X Y

li a {
text-d­eco­ration: none;
}
Desce­ndant selector.

X

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

X:visited and X:link

pseudo­-cl­asses

X + Y

Adjacent selector only if the element is Y immedi­ately preceded by X.

X > Y

Only distinct children.

X ~ Y

Less strict sibling combin­atior, 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[dat­a-f­ile­typ­e="i­mag­e"] {
color: red;
}
Custom attributes

X[foo~­="ba­r"]

 
a[dat­a-i­nfo­~="e­xte­rna­l"] {
color: red;
}
a[dat­a-i­nfo­~="i­mag­e"] {
border: 1px solid black;
}
and <a href="p­ath­/to­/im­age.jp­g" data-i­nfo­="ex­ternal image">
For spaced­-se­parated list of values.
 

X:checked

pseud­o-c­lass

X:before

 

X:after

 

X:hover

 

X:not(­sel­ector)

 

X:pseu­doE­lement

x::fi­rst­-line
x::fi­rst­-le­tter

X:nth-­chi­ld(n)

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

X:nth-­las­t-c­hild(n)

 

Other nths

X:nth-­of-­type(n)
X:nth-­las­t-o­f-t­ype(n)
X:firs­t-child
X:last­-child
X:only­-child
X:only­-of­-type / no siblings within parent container /
X:firs­t-o­f-type

Origin

Download the The 30 CSS Selectors You Must Memorize Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/dimitrios_the-30-css-selectors-you-must-memorize.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          CSS2 Cheat Sheet
          Font Awesome Cheat Sheet

          More Cheat Sheets by dimitrios

          CoffeeScript Cheat Sheet
          vim.spf13 Cheat Sheet
          My JS notes Cheat Sheet