Font-size [7/10] Doubts regarding the CSS code


The code / lesson is working fine and there’s no problem per se. The only thing that I don’t understand is the use of ‘.hero a’ selector in the code. I mean when we are ought to use ‘a.hero’ and not ‘.hero a’?. When I remove the .hero in ‘.hero a’ it works just as fine, just the same. Is it something to be bothered about?


the arrangement of your selectors can very much affect what elements you want to scope/zero-in on

so by saying “a.hero” and “.hero a”

is like saying for the latter, all elements/containers with the class .hero we want to select your anchor links…

so then the former is more likely target a link with the class of hero…


To iluustrate what @tommygebru is referring to…

.hero a {
     color: green;
a.hero {
    color: orange;
<ul class='hero'>
  <li><a href="#">link a</a></li>
  <li><a href="#">link b</a></li>
  <li><a href="#">link c</a></li>
  <li><a class="hero" href="#">link d</a></li>

All of the above links will be green, except the last one, which will be orange.


haha thanks @mtf thats a pretty sweet example and includes both css declarations in one html structure!


Well, many thanks @tommygebru and @mtf Wish I could mark both the answers as the solution. So this is to say, in this scenario, if there ain’t any other class that contains anchor element other than ‘hero’ can we use just ‘a’ as the selector?


Because of its low specificity the selector will be universal and apply to the entire document. It’s okay for rules we wish to apply across all elements of the type. Eg.

a {
    text-decoration: none;
a:hover {
    text-decoration: underline;


It depends on a case by case basis and how you choose to design your work, the level of specificity is something you will always be concerned with in css :smile:


This topic was automatically closed after 7 days. New replies are no longer allowed.