CSS Selectors

If you're just getting started with frontend development, mastering CSS selectors is one of the most important steps you can take. Selectors are how you tell the browser what to style. Without them, your beautiful styles won't reach the right parts of your page. Let's review the different types of CSS selectors — from the basics to the advanced — and see how they work.

CSS selectors let you target specific elements in HTML to style them.

Type Selector

Targets all elements of a specific tag.

python

This will turn all <p> elements black.

Class Selector

Targets any element that has a specific class.

python

Use class selectors when you want to apply styles to multiple elements, even if they are different tags.

ID Selector

Targets a single element with a specific id.

python

Use IDs sparingly for unique elements (like #header, #footer).

Universal Selector

Selects all elements on the page.

python

Good for setting global styles (e.g., margin reset, border-box model).

Group Selector

Lets you apply the same style to multiple selectors at once.

python

Saves repetition when different elements share the same styling.

Combinators let you select elements based on how they are nested in the HTML.

Descendant Selector (A B)

Selects B if it's inside A, no matter how deeply nested.

python

Child Selector (A > B)

Selects B only if it's a direct child of A.

python

Adjacent Sibling (A + B)

Selects B only if it immediately follows A.

python

General Sibling (A ~ B)

Selects all Bs that follow A as siblings.

python

These let you target elements based on the presence or value of an attribute.

Exact Match

python

Starts With

python

This targets links that start with https.

Has Attribute

python

Pseudo-classes apply styles based on state or position.

Hover

python

Styles when the mouse is over the button.

First Child

python

Nth-child

python

Not

python

Used to style parts of elements or insert content.

::before / ::after

python

::first-line

python

If multiple selectors target the same element, CSS uses specificity to decide which one wins:

• ID selectors (#id) = 100 points;
• Class selectors (.class) = 10 points;
• Element selectors (div) = 1 point.

python

Avoid using !important unless you really need to. It can make debugging a nightmare.

CSS selectors are your toolkit for targeting and styling elements in your UI. Learn them well, and you'll write cleaner, more flexible, and more powerful styles.

Don't just memorize them — experiment with small layouts or clone a simple website to apply what you've learned.

Or play a game like CSS Diner — it's fun and educational.

Q: What's the difference between a class and an ID selector?
A: A class selector (.btn) can be used on multiple elements, making it ideal for reusable styles. An ID selector (#header) should only be used once per page. IDs are also more specific, so they override class styles if there's a conflict — which can make your CSS harder to maintain.

Q: Why isn't my CSS rule applying?
A: Common reasons include:

• Wrong selector (e.g. missing dot for class: .btn vs btn);
• Specificity issues (a more specific rule is overriding yours);
• The element doesn't exist or doesn't match the selector in the HTML;
• The stylesheet isn't properly linked.

Use browser dev tools to inspect the element and see what styles are applied and why.

Q: Can I combine selectors?
A: Yes, and it's very common. For example:

css

This targets an element with class card, inside .container, on hover, and adds an arrow after it. Combining selectors increases specificity and control.

Q: Are pseudo-elements real elements in the DOM?
A: No. Pseudo-elements like ::before and ::after don't appear in the DOM tree — they're rendered visually but don't exist in your HTML or DOM API. You can style them, but you can't manipulate them with JavaScript directly (unless it's through CSS changes).