CODEWITHSUNDEEP
htmlcss
soulsako20
soulsako20

Reputation: 233

How to target the second span tag in ul using pure CSS?

The Code:

<ul class="site-nav list--inline " id="SiteNav">   
  <li class="site-nav--active">
    <a href="/" class="site-nav__link>
      <span class="site-nav__label">HOME</span>
    </a>
  </li>    
  **<li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">ORDER NOW</span>
    </a>
  </li>**    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">TRACK ORDER</span>
    </a>
  </li>    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">HELP CENTER</span>
    </a>
  </li>

</ul>

I want to target the SECOND span tag in the list with class: site-nav__label using pure CSS.(nth-child, second-of-type etc.) I cannot add ids or classes to this span tag.

Help will be greatly appreciated.

Upvotes: 0

Views: 972

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

Because you want inside ul tag, I used ul.site-nav for ul tag with class site-nav

ul.site-nav li:nth-of-type(2) a > span {
  border: 3px solid red;
}
<ul class="site-nav list--inline " id="SiteNav">   
  <li class="site-nav--active">
    <a href="/" class="site-nav__link>
      <span class="site-nav__label">HOME</span>
    </a>
  </li>    
  **<li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">ORDER NOW</span>
    </a>
  </li>**    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">TRACK ORDER</span>
    </a>
  </li>    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">HELP CENTER</span>
    </a>
  </li>

</ul>

Upvotes: 0

Jordi Castillo
Jordi Castillo

Reputation: 693

For select the second li try with 

#SiteNav li:nth-of-type(2)

and then for select the span of second li add span after:

#SiteNav li:nth-of-type(2) span

Upvotes: 2

Jon P
Jon P

Reputation: 19772

To Target the span use a combination of nth-of-type and child combinators

#SiteNav > li:nth-of-type(2) > a > span {
  font-weight:bold;
  color:red;
}

/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
  font-style:italic;
}
<ul class="site-nav list--inline " id="SiteNav">   
  <li class="site-nav--active">
    <!-- Fixed Missing closing " -->
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">HOME</span>
    </a>
  </li>    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">ORDER NOW</span>
    </a>
  </li>
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">TRACK ORDER</span>
    </a>
  </li>    
  <li>
    <a href="/" class="site-nav__link">
      <span class="site-nav__label">HELP CENTER</span>
    </a>
  </li>

</ul>

For a good article on nth-child (and nth-of-type) see https://css-tricks.com/useful-nth-child-recipies/

Upvotes: 0

Related Questions