Menu

Tools Submit Materials Pricing About Contact Login Register
Technology • Nov 4, 2024 • ... min read

Mastering CSS Selectors

admin@admin.com
admin@admin.com
Article Author
Mastering CSS Selectors

CSS provides a variety of selectors to target elements with precision. Here’s a comprehensive overview:

1. Universal Selector

ghp_hATCP1QcjRuN7Sh1Yuvnvouoewutck2eZ2ZC

  • *: Selects all elements.
 
* { margin: 0; padding: 0; }

2. Type Selector

  • Selects all elements of a specific type (e.g., p, div).
 
p { color: blue; }

3. Class Selector

  • Selects elements with a specific class.
 
.my-class { font-size: 18px; }

4. ID Selector

  • Selects an element with a specific ID (must be unique).
 
#my-id { background-color: yellow; }

5. Attribute Selector

  • Selects elements based on the presence, value, or part of a value of an attribute.
Selector Description
[attr] Selects elements with the attr attribute.
[attr="value"] Selects elements where attr is exactly value.
[attr~="value"] Selects elements where attr contains value as a word.
`[attr ="value"]`
[attr^="value"] Selects elements where attr begins with value.
[attr$="value"] Selects elements where attr ends with value.
[attr*="value"] Selects elements where attr contains value.
 
a[target="_blank"] { color: red; }

6. Pseudo-Classes

  • Dynamic pseudo-classes: Target elements in specific states.
Selector Description
:hover Selects elements when hovered over.
:focus Selects elements when focused.
:active Selects elements when active (clicked).
:visited Selects links that have been visited.
 
button:hover { background-color: green; }
  • Structural pseudo-classes: Target elements based on their structure in the DOM.
Selector Description
:first-child Selects the first child of a parent.
:last-child Selects the last child of a parent.
:nth-child(n) Selects the nth child of a parent.
:nth-last-child(n) Selects the nth child from the end.
:nth-of-type(n) Selects the nth child of a specific type.
:not(selector) Selects all elements that do not match the selector.
 
li:nth-child(2) { color: purple; }

7. Pseudo-Elements

  • Single-pseudo-elements: Create and style parts of an element.
Selector Description
::before Inserts content before an element’s content.
::after Inserts content after an element’s content.
::first-line Styles the first line of text.
::first-letter Styles the first letter of text.
::selection Styles the highlighted part of text when selected.
 
p::before { content: "Note: "; font-weight: bold; }

8. Descendant Selector

  • Selects elements that are nested within another element.
 
div p { font-size: 14px; }

9. Child Selector

  • Selects direct children of an element.
 
div > p { color: orange; }

10. Adjacent Sibling Selector

  • Selects an element that is immediately after another element.
 
h1 + p { margin-top: 0; }

11. General Sibling Selector

  • Selects all siblings after a specified element.
 
h1 ~ p { color: blue; }

12. Grouping Selector

  • Selects multiple selectors, applying the same styles to all.
 
h1, h2, h3 { font-weight: bold; }

13. Combinators

Selector Description
E F Selects all F elements inside E.
E > F Selects direct child F elements of E.
E + F Selects F immediately following E.
E ~ F Selects all F elements following E siblings.

Summary Table of Common Selectors

 

Selector Type Example Description
* Universal * Selects all elements.
E Type p Selects all <p> elements.
.class Class .my-class Selects all elements with the class my-class.
#id ID #my-id Selects the element with the ID my-id.
[attr] Attribute [type="text"] Selects elements with a specific attribute.
E, F Grouping h1, h2, h3 Selects multiple element types.
E F Descendant div p Selects all <p> elements within <div>.
E > F Child ul > li Selects direct child <li> elements in <ul>.
E + F Adjacent Sibling h1 + p Selects the <p> element directly after <h1>.
E ~ F General Sibling h1 ~ p Selects all <p> elements after <h1>.

 

 

Using these selectors helps create efficient and targeted styles, which can make your CSS code more organized and maintainable.

Login to Like
Share

Discussion (2)

admin@admin.com
admin@admin.com
Jun 5, 2025

Ff

admin@admin.com
admin@admin.com
Dec 31, 2024

Tuu

Related Articles