如何定位 html 元素 class 名称而不是元素？

Question

I have this code but it targets all <li> and <a> elements, how can I make it target a class instead of targeting the element?

I want to have the same exact effect.

This is my html & css:

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F0E68C; } li { float: left; } li a { display: block; color: Black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #FFD750;

 <nav> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="boyshome.html">Boys Campus</a></li> <li><a href="girlshome.html">Girls Campus</a></li> <li><a href="calculator.html">GPA Calculator</a></li> </ul> </nav>

Answer 1

If you don't want to target all li a elements and only a specific class name, you can have this instead:

li a.active {                 // or just a.active {...}
    display: block;
    color: Black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a.active:hover {
  background-color: #FFD750;

---

a.active {...}             // or just .active, this will target the class name

Answer 2

There are different ways to select your HTML elements in the DOM.

• You can select ids with #
• You can select classes with .
• You can select all elements with a tag, like li

Here is an example:

<li id="first" class="listElement">First element</li>
<li class="listElement active">Second element</li>

#first {
    color: red;
}
.active {
    background: yellow;
}
.listElement {
    padding: 5px;
}

li {
    font-size: 14px;
}

Answer 3

You can target any class by using .<class> . So you can do something like:

  .active {
      <Desired style definition>
   }

This will add the styling to all the elements with the class active . Also note if you want to target any element by it's Id then use #<id> instead of dot .<class>