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 Yli a {
text-decoration: none;
}
Descendant selector.
|
Xa {
color: red;
}
All elements of page.
|
X + YAdjacent selector only if the element is Y immediately preceded by X.
|
X ~ YLess 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 selectorsX[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:pseudoElementx::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 nthsX: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