What does the "a" after the selector ".topnav" do?-CodePudding

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;
}

CodePudding user response：

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

CodePudding user response：

It targets the anchor inside the topnav element

.topnav a {
  color: red;
}

<div class='topnav'>
  <a>I am the link</a>
</div>

CodePudding user response：

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

<div >
  <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.

I sincerely hope this helped you! Have a great day.