CODEWITHSUNDEEP
csssasscss-selectors
user5716144
user5716144

Reputation:

How to address the different <a> in this <li>

i have a slight problem with the :nth-of-type() selectors.. maybe you can help out. I can't manage to select only the first a. how to do this? Thanks

 <nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Produkte</a></li>
  <li><a href="#">Beratung</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Anfahrt</a></li>
</ul>

and the sass

li > a:nth-of-type(1){

&:before{
content:"1";
display:inline-block;
width:20px;
background:black;
border-radius:50%;
margin-right:5px;
}
}

Upvotes: 1

Views: 50

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122077

You can select first li and then a inside li:first-child a, you can do the same with li:nth-of-type(1) a or li:nth-child(1) a

li:first-child a {
  background: blue;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Beratung</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anfahrt</a></li>
  </ul>
</nav>

Upvotes: 3

Related Questions