All CSS Selectors in One Place: Learn to Target Any Element

I will be talking about selectors in CSS, and how selectors are used to select an element on which style is going to be applied. Now, what kind of elements can we apply style on, and how can we select those elements?

For example, element with an ID, element with a class, we can target the element by its name. We can also decide that if there is a particular type of element in a particular type of element, then only the styling is applied.

I will be providing you the complete list of CSS selectors in this guide. This is a very important list of CSS. So increase your excitement, and let's go.

1. Universal Selector (*)

* {
    margin: 0;
    padding: 0;
}

<p>All elements will have no margin or padding.</p>

→ Selects all elements on the page.

2. Type Selector (element)

p {
    color: blue;
}

<p>This text is blue.</p>
<p>Another blue text.</p>

→ Selects all <p> elements.

3. Class Selector (.classname)

.highlight {
    background-color: yellow;
}

<p class="highlight">This paragraph has a yellow background.</p>

→ Selects all elements with the highlight class.

4. ID Selector (#idname)

#main-title {
    font-size: 24px;
}

<h1 id="main-title">This is a large title.</h1>

→ Selects the element with the id="main-title".

5. Attribute Selectors

[attribute] → Selects elements with the given attribute

[data-info] {
    border: 2px solid red;
}

<p data-info="123">This has a custom attribute.</p>

[attribute=value] → Selects elements with the exact attribute value

input[type="text"] {
    border: 1px solid blue;
}

<input type="text" placeholder="Enter text">
<input type="password" placeholder="Enter password">

→ Selects only text inputs, not password inputs.

[attribute~=value] → Selects elements where the attribute contains the word (space-separated)

[class~="btn"] {
    background-color: red;
}

<button class="btn primary">Click Me</button>

→ Selects elements with the word "btn" in the class list.

[attribute|=value] → Selects elements with the attribute value or value followed by a hyphen (-)

[class|="lang"] {
    color: green;
}

<p class="lang-en">This is English.</p>
<p class="lang-fr">This is French.</p>

→ Matches lang-en and lang-fr because they start with lang.

[attribute^=value] → Selects elements where the attribute starts with a value

a[href^="https://"] {
    color: green;
}

<a href="https://example.com">Secure Link</a>

→ Selects all links that start with https://.

[attribute$=value] → Selects elements where the attribute ends with a value

img[src$=".png"] {
    border: 3px solid blue;
}

<img src="logo.png">

→ Selects all images ending in .png.

[attribute*=value] → Selects elements where the attribute contains a value

a[href*="example"] {
    font-weight: bold;
}

<a href="https://example.com">Visit Example</a>

→ Selects all links that contain "example" anywhere in the URL.

6. Grouping Selector (selector1, selector2)

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

→ Selects all <h1>, <h2>, and <h3> elements.

7. Combinators

Descendant Combinator (parent child)

div p {
    color: red;
}

<div>
    <p>This is red.</p>
</div>

→ Selects all <p> inside <div>.

Child Combinator (parent > child)

div > p {
    color: blue;
}

<div>
    <p>This is blue.</p>
    <span><p>This is not blue.</p></span>
</div>

→ Only direct <p> inside <div> turns blue.

Adjacent Sibling Combinator (element1 + element2)

h1 + p {
    font-style: italic;
}

<h1>Heading</h1>
<p>This is italic.</p>

→ Styles the first <p> after <h1>.

General Sibling Combinator (element1 ~ element2)

h1 ~ p {
    color: green;
}

<h1>Heading</h1>
<p>Green text.</p>
<p>Also green.</p>

→ Styles all <p> elements after <h1>.

8. Pseudo-Classes

User Interaction

button:hover { background: red; }
button:active { background: yellow; }

Form & Input State

input:checked { border: 2px solid green; }
input:disabled { background: lightgray; }

Structural

p:first-child { font-weight: bold; }
p:last-child { color: orange; }
p:nth-child(2) { text-decoration: underline; }

9. Pseudo-Elements

p::before { content: "👉 "; color: red; }
p::after { content: " ✅"; color: green; }

<p>Select this text.</p>

10. CSS Grid Selectors

div:nth-child(2 of .box) { background: yellow; }

<div class="box">Box 1</div>
<div class="box">Box 2</div> <!-- This is yellow -->

11. Special & Experimental

:lang(en) { font-style: italic; }
:dir(rtl) { text-align: right; }
:has(img) { border: 2px solid black; }

<p lang="en">This is English.</p>

So, that's the complete list of CSS selectors and how they work! Selectors are the foundation of styling in CSS, allowing us to target elements in different ways—by ID, class, attribute, relationship, or even user interaction. Mastering them gives you full control over your styles, making your designs more precise and efficient.

Now that you know how to select any element and apply styles, you can start experimenting and combining selectors to create powerful styles. Keep exploring, keep styling, and have fun with CSS!

Don’t forget to share it with your fellow developers and friends, so it can reach to a wide audience.

📍 Find me on: LinkedIn | Medium | Bluesky

Comments

[netcodensazzadali]

great!

[Muhammad Usman]

Thank you!

[Alwaisy al-waisy]

Develop it's interactive verison if you do frontend engineers will love that project.

[JWP]

Excellent