'What does the "a" after the selector ".topnav" do?

I am trying to replicate an navigation bar based off an example I saw. If someone could explain what it does that would be great.

https://i.stack.imgur.com/3WB0Y.png

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
css


Solution 1:[1]

It is an 'Descendant Selector', meaning it whatever is inside of 'topnav' class with the tag 'a' will be affected by the written css rules. You can refer to https://www.w3schools.com/css/css_combinators.asp for more information

Solution 2:[2]

It targets the anchor inside the topnav element

.topnav a {
  color: red;
}
<div class='topnav'>
  <a>I am the link</a>
</div>

Solution 3:[3]

It's basically the tag inside a HTML element with the class name topnav. Here's an example :

<div class="topnav">
  <a href="about.html">About</a>
</div>

You can see the " < a > " there, in your CSS code we use .topnav a, it's not the best term to use but we can say that the .topnav a just grabs the childs of the class topnav.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Can Oezlemis
Solution 2 Evren
Solution 3 Zsolt Meszaros

Related Questions