What selectors are the right way?

Sorry for the broad topic title. I couldn’t think of any legit name since i don’t really have the specific names for some of the CSS and HTML content. Anyways, i was simply wondering what the difference was between these two options within a css?

nav a{ /*some code*/ }

and this
nav ul li a{ /*What is the difference between this and the above portion?*/ /*some code*/ }

The html markup is this:
`

`

Should i always follow the hierchy of “nav ul li a” to access “a” or can i just jump into “nav a” or can i even do just the “a” ?

Hope this is understandable, thank you

Hi, JonathanVasquez.

Both examples target ALL anchors within a <nav> tag and could be used to apply certain styles to all anchors.

Because there are more tags in the second example, it has more specificity. In other words, to change a property would require another selector of equal or greater specificity (weight). It is generally better to use the least amount of specificity required to target specific elements, which means that the first example would be the better place to start. Add more specificity as needed.

So you’re saying if I had a CSS file in the order like this

nav ul li a{ 
  color: black;
}
⋮
nav a{
  color: blue;
}

the color would be black even though blue came after it?

Yes, that’s what’s meant. If you run an example like this, you’ll see that the text is black, because the first rule has a higher specificity than the second:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

nav ul li a{
  color: black;
}

nav a{
  color: blue;
}

</style>
</head>
<body>

<nav>
  <ul>
    <li><a href="">test</a></li>
  </ul>
</nav>

</body>
</html>

Hey Mitt, yes, because we need to look at the specificity here.

http://www.codefundamentals.com/blog/css-specificity

An HTML element is valued at 0,0,0,1, and you shouldn’t think of it as numerical values, but you sorta can.

So the nav ul li a{} example is 0,0,0,4, while nav a{} is 0,0,0,2. So it technically wins out.

If you do the “math”, you can 100% always tell when something will win, lose, or tie (ties result in the latter declared winning).

Ah, and the Firefox dev tool Inspector shows a “strike through” as a clue.

So if I desperately wanted it blue, my choices would be to edit the CSS selectors, reorder them, or add !important.

The first two seem like it could be work, especially if there is a lot of CSS to look through, and I’ve heard using !important is best kept to a minimum.

I guess it would be best to get things right before the CSS gets too big to want to look through it

EDIT
I should have read your link before I posted about !important

I don’t know how the “numbers” would work out for something like

i.fa.fa-shield {}
i.fa {}
.fa.fa-shield {}
.fa {}

so I’ll try some experimenting ASAP (hunger is calling)

First one is two classes and an HTML element. So it would be 0,0,2,1
Second one is one class and one HTML element. So 0,0,1,1.
Third one is just two classes, so 0,0,2,0
Fourth is one class, so 0,0,1,0.

So if you think of this numerically (you probably shouldn’t but it works here), the first will take precedence, then the third, then the second, then the fourth (hypothetically if they all target the same leement).

!important is sorta weird. You can’t override it with numerically. Aka lets say you had this.

i { color:red!important;}

That would be calculated as 1,0,0,1. But a weight higher than that wouldn’t override it. You’d need another !important on there with more weight to it. Aka

html i {color:blue!important;}

That’s 1,0,0,2.

Does the link explain it well enough? Going to bed, will read replies in the morning.

You could specify a class in one of the tags and increase the “weight” or add an ID to one of the tags and outweigh everything except a selector with more IDs or the !important modifier.

True enough.

I’ve read Ryan’s page a couple times slowly and I think I’ve digested it well.

I was curious about relationship selectors so I did some testing.

I figured “direct descendant” would be like a psuedo and have more weight, but not so.

div > span {
  color: #0f0;
}
div span { 
  color: #f00;
}

the last always wins out despite the presence of " > "

All combinators have zero specificity just like a descendant selector (space) and can be ignored in your calculations. I wrote about it a long time ago in the Sitepoint book and online resources (but they’ve since re-branded my text under a different name but its the same article).

1 Like

The first one would target all anchors in a nav, but the second would only target anchors in an unordered list in a nav, overriding the blue being more specific.
So…

nav a{
  color: blue;
}
nav ul li a{
  color: red ;
}

would do this…

<nav>
<a>Blue Anchor</a>
 <ul>
   <li><a>Red Anchor</a></li>
 </ul>
</nav>
1 Like

All that is understandable! I personally prefer to go all the way down
nav ul li a
rather than cutting straight
nav a

however, i have another question?
When creating a tag within html:

<nav class="menu"></nav>

i read that i can call it using either:

nav {}
or
.menu{}

however, which one would be more dominant? or would it even work

`


`

Either would work. .menu is dominant because classes have more weight than element selectors.

You could also use nav.menu which could be useful if you had another <nav> section, for instance for a secondary navbar.

nav.menu is the same as .menu? However if i have two different nav, shouldn’t i still use the class specifier .menu rather than doing nav.menu, what would be the benefits ? If i had another nav couldn’t i just give it a class to differ from both the navs?

Sorry, I’m probably complicating things. nav.menu is more specific and yes, unless you assign another element the class menu (which is unlikely), it would have the same effect as .menu.

That is a common approach eg.

<nav class="menu primary">
...
<nav class="menu secondary">

Then you could use
.menu {} to style both or .primary {} to style only the one.
If other elements also had a class of primary you could use .menu.primary {} to make sure it was the menu and not the other

If you take a look at the view-source of a typical WordPress page you’ll usually see ids and classes all over the place. IMHO while this may make it easier for those less CSS savvy to style the pages, it feels to me to be bloat. With some knowledge and skill and some time spent, it is usually possible to get things looking good by using mostly element selectors with several class selectors and a few id selectors.

You don’t want to have something so complex it takes ages to debug or tweak

The best choice depends on the context of the site/page.
If you will only ever have one nav element per page, or all nav elements are styled the same, then just nav {} will suffice.
If you have more than one nav per page and they are styled differently, then you will need classes or IDs.

I’m currently working on a portfolio site for myself and all my developer projects. For the case of the site, i only really have one navigation. I’m just trying to understand it for later projects that would require multiple tags of the same element.

One thing i like about HTML/CSS is that there is many ways of doing the exact same thing. That adds personality to every source code. It demonstrates some characteristics about the author (to a certain extent)!

If you use the least specific rule that actually matches then you leave room for more specific rules in the future if the page changes and you need to override the rule some of the time.