CSS pseudo selector versus id or class name

I’m wondering when and why to use class or id name versus using pseudo selectors in CSS?
The only reason I can come up with so far is making it easier for others to read my code but I’m failing to see other use cases. Any help would be appreciated.

A pseudo selector is for selecting a state of an element (clicked, active, disabled, etc). You actually need an ability to select elements in the first place. 99% of CSS generally involves applying properties to classes, so I think you’re missing something fundamental here, classes aren’t there to make it easier to read code.

I might be missing something as you suggest.
What I was referring to in regard to reading code what that adding a class or id name makes it easier for another person to find said name via search in CSS, JS or HTML versus that of a selector.
Example:

<section>
    <p class="paragraph"></p>
    <p class="paragraph"></p>
    <p class="paragraph"></p>
    <p class="paragraph"></p>
</section>

<style>
.paragraph {
    width:300px;
}
section > p {
    width:300px;
}
</style>

Also I’d add that pseudo selectors are more than just about the state of an element as with p:first-child, etc. They are used to select elements as you would with class or id name.

So my question still stands. Other than making code easier to read and search, when and why is it preferential to use class or id name when selectors serve the same purpose for styling and referencing the DOM?

I hope that helps clarify my question or lack of understanding.

Yes, they can make it easier to find an element in a search, but this is not the primary reason they are used.

Classes are used to specify groups of elements. IDs are used to single out an individual element. For instance, you could have a group of paragraphs you wanted to style the same way so you would give them all the same class. But then in that group you have one specific paragraph you want to style uniquely in some way so you could give that one particular paragraph an id as well.

Yes. I agree. I understand what class and id names are used for and why. I’m just not understanding why to use them over selectors.
For your example:

<section>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</section>
<style>
section p {
color:blue;
}
section p:nth-child(3) {
color:red;
}
</style>

What if you had another <section> on the page with four <p>s as well but you only wanted the third child on the first section to be red?

Yes, you may be able to get away with styling a simple page using no classes/ids but as the page becomes more complex I think you will find your CSS selectors getting ridiculously complex and it will be much easier to just use classes and ids as appropriate.

Go to “view source” in any large website (or any website full stop tbh), then count the number of elements. Your example works for tiny toy things, and breaks down for anything beyond that. You need to be able to select elements, you can’t do that in a sane manner using tags.

Makes sense. I would assume ease of scalability as well. Thanks for the explanation.

“You need to be able to select elements, you can’t do that in a sane manner using tags.”

You can select elements using selectors. But I get your point.

The main take away from that sentence is…

The problem is also that element selectors are more fragile and inflexible. Relying on the DOM structure (the HTML structure) for selectors is in general inflexible as you can’t change or move elements as easily without having to adjust the CSS accordingly.

I get how the code could get long and that making the use of classes and ids easier to implement and keep track of but I don’t understand what you mean by it being less flexible and fragile. I guess maybe I’m missing something fundamental.
If I want to change something in the CSS I would have to change it in the CSS code whether using a selector or a class or id name, correct?
I can access elements in the DOM using either selectors, class or id name.
Once I have used the selector to call an element in CSS or DOM how is that less flexible or fragile than a class or id name?
Thanks for taking the time to explain this!

Because if you use tags only, what you are doing is encoding the HTML structure into the CSS. Every time you change the HTML, you have to change all the CSS. And you need to duplicate lots of code, because each thing is now unique. And you run into specificity problems immediately. If you just use a class, it doesn’t matter where the class is in the HTML.

ul > li > a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

vs.

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

Ah. I get it now.
So if the location of the element changes in the flow of HTML then that selector would be incorrect. But using class or id names doesn’t matter where in the flow of HTML that code exists.

Thanks everyone for taking the time to explain this!

If you haven’t worked on a big/complex project yet then it may not be self-evident to you right at the moment and you’ll just have to take our word for it :slight_smile:

Fair enough. I don’t know what you would consider complex but I find it interesting that many youtubers I watch use selectors mixed with class and ids. I would assume these would be considered simple projects.

  • tags: the basic styling that applies to everything. CSS resets use tags only, and are the primary usecase.
  • classes: everything else
  • IDs: not particularly flexible and not terribly useful from a CSS perspective vs. classes. Useful for using as JS hooks.

To go back to the original question, pseudo-selectors are used regardless, because they are how you can select an element when it’s state changes (hover, click, focus etc) – nothing else allows you to do this with CSS.

cool. thanks.
Off topic: Are you using ‘tags’ and ‘elements’ to mean the same thing?

Yes, you will use both. This is not an either/or situation.

Cool. Thanks. I think I understand it now.

Yep, sorry for the confusion