In CSS, what does the "a" mean in the selector ".class a"?

Question

I'm trying to figure out this CSS example from w3schools:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align:center;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

}

Clearly, sidenav is the element's class and one might reason that the "a" is a selector for sidenav after the transition... but I can't find a direct definition with examples, so I'm looking to my superiors here for clarification before I go off misusing this.

In short, what is the "a"?

Help and thanks!

There are three types of basic identifiers in CSS: `.class`, `#id` and `html_element` . varying identifiers are differentiated by spaces. So your query CSS is saying "apply to the anchor HTML element that is a decendent of the .sidenav class." — Martin, Feb 06 '21 at 22:25

YT_Xaos · Accepted Answer · 2021-02-06T21:09:08.153

Basically a Would be for the <a href=""></a> tag in html but that would mean that you are selecting the a tag inside the sidenav. Example:

<!DOCTYPE html>
 <html>
  <head>
<style>
div a {
 text-decoration: none;
}
</style>
  </head>
<body>
<div>
 <a href="#">I don't have an underline because I was selected in the div a</a>
</div>
<a href="#">I have an underline because I was not selected</a>
</body>
 </html>

In CSS, what does the "a" mean in the selector ".class a"?

1 Answers1