CODEWITHSUNDEEP
cssselector
Flyip dev
Flyip dev

Reputation: 5

CSS select only first child in an unordered list

I have the following code in my wordpress theme:

<div class="BlaBla">
   <ul>
       <li>
          <a>stuff to select</a>
       </li>
       <li>
          <a>stuff to NOT select</a>
       </li>
   <\ul>
</div>

i have to select the first "a" tag to remove it (add the rule display: none) but i can't put id's or classes

i tried the following rules but select every things

div[class="BlaBla"] ul li a:first-child{
    display:none;
}

div[class="BlaBla"] ul li:first-child{
    display:none;
}

div[class="BlaBla"] > ul > li:first-child{
    display:none;
}

Upvotes: 0

Views: 414

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

you need to target the link inside the first list-item so the selector is

.BlaBla li:first-child a {
  display: none;
}

About your attempted solutions:

  • the first one will target all the first links inside all the list-items
  • the second one will target the first list-item (and not the link inside the first list-item)
  • the last one uses the child combinator and, in your example, works exactly as in the second attempt.

Upvotes: 1

Related Questions