This content originally appeared on DEV Community and was authored by Nwafor Onyebuchi
Here’s a comprehensive CSS Selectors Cheat Sheet that covers all the basic and advanced selectors you might need:
1. Basic Selectors
-
Universal Selector (
*): Targets all elements.
* {
margin: 0;
}
- Type Selector (Element Selector): Targets elements of a given type.
p {
color: blue;
}
-
Class Selector (
.classname): Targets elements with a specific class.
.container {
width: 100%;
}
-
ID Selector (
#idname): Targets an element with a specific ID.
#header {
background-color: grey;
}
2. Attribute Selectors
- [attribute]: Targets elements with the specified attribute.
[type="text"] {
border: 1px solid black;
}
- [attribute=value]: Targets elements with an exact attribute value.
[type="checkbox"] {
display: inline-block;
}
- [attribute^=value]: Targets elements where the attribute starts with the specified value.
[href^="https"] {
color: green;
}
- [attribute$=value]: Targets elements where the attribute ends with the specified value.
[href$=".pdf"] {
color: red;
}
- [attribute*=value]: Targets elements where the attribute contains the specified value.
[class*="button"] {
font-weight: bold;
}
3. Combinator Selectors
- Descendant Selector (space): Targets elements inside another element.
div p {
color: blue;
}
-
Child Selector (
>): Targets direct child elements of a parent.
ul > li {
list-style-type: none;
}
-
Adjacent Sibling Selector (
+): Targets the first element that is immediately preceded by a specified element.
h2 + p {
margin-top: 0;
}
-
General Sibling Selector (
~): Targets all elements preceded by a specified element (not necessarily directly).
h2 ~ p {
color: green;
}
4. Pseudo-Classes
-
:hover: Targets elements when they are being hovered by the cursor.
a:hover {
text-decoration: underline;
}
-
:focus: Targets an element that has focus.
input:focus {
border-color: blue;
}
-
:nth-child(n): Targets the nth child of its parent.
li:nth-child(2) {
color: red;
}
-
:nth-of-type(n): Targets the nth child of its type.
p:nth-of-type(3) {
font-size: 1.2em;
}
-
:first-child/:last-child: Targets the first or last child of its parent.
p:first-child {
font-weight: bold;
}
-
:not(selector): Excludes elements that match the selector.
p:not(.highlight) {
color: grey;
}
5. Pseudo-Elements
-
::before/::after: Inserts content before or after an element’s content.
p::before {
content: "Note: ";
font-weight: bold;
}
-
::first-letter: Targets the first letter of an element.
p::first-letter {
font-size: 2em;
}
-
::first-line: Targets the first line of text inside an element.
p::first-line {
font-style: italic;
}
6. Grouping Selectors
-
Grouping Selector (
,): Applies the same styles to multiple selectors.
h1, h2, h3 {
color: blue;
}
7. Special Combinators
-
Empty Selector (
:empty): Targets elements with no children or text.
div:empty {
display: none;
}
-
Enabled/Disabled Selector (
:enabled/:disabled): Targets form elements that are enabled or disabled.
input:enabled {
background-color: white;
}
input:disabled {
background-color: lightgrey;
}
-
Checked Selector (
:checked): Targets checkboxes or radio buttons that are checked.
input:checked {
border-color: green;
}
8. Advanced Selectors
-
:nth-child(odd)/:nth-child(even): Targets odd or even children.
tr:nth-child(even) {
background-color: lightgrey;
}
-
:nth-last-child(n): Targets the nth child from the end.
li:nth-last-child(1) {
color: red;
}
-
:only-child: Targets an element that is the only child of its parent.
div:only-child {
border: 1px solid red;
}
-
:root: Targets the root element of the document (html).
:root {
--main-color: blue;
}
9. Attribute Presence and Value Selectors
- [attribute]: Targets elements with the given attribute.
[required] {
border: 2px solid red;
}
- [attribute^=value]: Targets elements where the attribute starts with a specific value.
[href^="http"] {
text-decoration: underline;
}
- [attribute$=value]: Targets elements where the attribute ends with a specific value.
[href$=".pdf"] {
color: red;
}
- [attribute*=value]: Targets elements where the attribute contains a specific value.
[class*="icon"] {
background-color: yellow;
}
10. Other Selectors
-
:lang(language): Matches elements that are of a particular language.
p:lang(en) {
color: blue;
}
-
:target: Targets an element with an id that matches the URL fragment.
#section:target {
background-color: yellow;
}
Conclusion
This cheat sheet covers most CSS selectors, from basic to advanced. Combining them in creative ways allows you to target specific elements efficiently and control the appearance of your web pages with precision.
This content originally appeared on DEV Community and was authored by Nwafor Onyebuchi
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Nwafor Onyebuchi | Sciencx (2024-09-15T05:17:10+00:00) CSS Selector Cheatsheet. Retrieved from https://www.scien.cx/2024/09/15/css-selector-cheatsheet/
" » CSS Selector Cheatsheet." Nwafor Onyebuchi | Sciencx - Sunday September 15, 2024, https://www.scien.cx/2024/09/15/css-selector-cheatsheet/
HARVARDNwafor Onyebuchi | Sciencx Sunday September 15, 2024 » CSS Selector Cheatsheet., viewed ,<https://www.scien.cx/2024/09/15/css-selector-cheatsheet/>
VANCOUVERNwafor Onyebuchi | Sciencx - » CSS Selector Cheatsheet. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/15/css-selector-cheatsheet/
CHICAGO" » CSS Selector Cheatsheet." Nwafor Onyebuchi | Sciencx - Accessed . https://www.scien.cx/2024/09/15/css-selector-cheatsheet/
IEEE" » CSS Selector Cheatsheet." Nwafor Onyebuchi | Sciencx [Online]. Available: https://www.scien.cx/2024/09/15/css-selector-cheatsheet/. [Accessed: ]
rf:citation » CSS Selector Cheatsheet | Nwafor Onyebuchi | Sciencx | https://www.scien.cx/2024/09/15/css-selector-cheatsheet/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.