Cheatography
https://cheatography.com
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 Originally by Jeffrey Way, 9 Jun 2011
*
Every element on the page. |
.X
.error {
color: red;
}
Class selector
|
X Y
li a {
text-decoration: none;
}
Descendant selector.
|
X
a {
color: red;
}
All elements of page.
|
X + Y
Adjacent selector only if the element is Y immediately preceded by X.
|
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: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. |
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 |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by dimitrios