Targeting an element in CSS

Question

<ul class="navbar-menu">
    <li class="navbr-item">
        <a href="/" class="navbar-links">Home</a>
    </li>
    <li class="navbr-item">
        <a href="Tech.html" class="navbar-links">Tech</a>
    </li>
    <li class="navbr-item">
        <a href="ContactUs.html" class="navbar-links">Contact Us</a>
    </li>
    <li class="navbr-btn">
        <a href="/" class="Button">Sign Up</a>
    </li>
</ul>

I want to to target the third item in my navbar which is contact us to make it wider than the other links i tried child selector but every time i fail to do any changes on it. tried .navbar-menu:nth-child(3) could you please help me.

Show the actual code you tried including selector and properties modified. — underscore_d, Feb 03 '21 at 10:05

score 0 · Accepted Answer · answered Feb 03 '21 at 10:09

See example below.

.navbar-menu li:nth-child(3) {
  background: blue;
}

<ul class="navbar-menu">
  <li class="navbr-item">
    <a href="/" class="navbar-links">Home</a>
  </li>
  <li class="navbr-item">
    <a href="Tech.html" class="navbar-links">Tech</a>
  </li>
  <li class="navbr-item">
    <a href="ContactUs.html" class="navbar-links">Contact Us</a>
  </li>
  <li class="navbr-btn">
    <a href="/" class="Button">Sign Up</a>
  </li>
</ul>

Targeting an element in CSS

1 Answers1