CodeForHappiness CodeForHappiness - 1 month ago 19
HTML Question

pseudo selectors in html

I have added colour only to the alternate list items using the

nth-child(odd)
pseudo-class, but I don't know why the color is displayed out of the border JSFiddle.

header li:nth-child(odd){
background-color:cyan;
}


Full demo:



header li {
list-style: none;
}
a:link, a:visited {
text-decoration: none;
background-color: blue;
display: block;
border: 1px solid blue;
color: black;
width: 150px;
margin-bottom: 1px;
text-align: center;
}
a:hover, a:active {
background-color: deeppink;
color: purple;
}
header li:nth-child(odd) {
background-color: cyan;
}

<header>
<h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1>
<ol>
<li><a href="https://www.facebook.com/" target="_blank">Sambar</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Idli</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Thai curry</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a>
</li>
<li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a>
</li>
</ol>
</header>




Answer

You have to apply it to anchor(a) elements:

header li:nth-child(odd) a {
  background-color: cyan;
}

header li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
  background-color: blue;
  display: block;
  border: 1px solid blue;
  color: black;
  width: 150px;
  margin-bottom: 1px;
  text-align: center;
}
a:hover,
a:active {
  background-color: deeppink;
  color: purple;
}
header li:nth-child(odd) a {
  background-color: cyan;
}
<title>Pseudo-Selectors</title>

<body>
  <header>
    <h1>This is simple demonstration of different ways of using Pseudo-Selectors</h1>
    <ol>

      <li><a href="https://www.facebook.com/" target="_blank">Sambar</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Idli</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Mysore Bonda</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Cashew Bonda</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Pesarattu Upma</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Cornflakes</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Thai curry</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Parmesan Garlic</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Honey BBQ</a>
      </li>
      <li><a href="https://www.facebook.com/" target="_blank">Pappu Charu</a>
      </li>
    </ol>
  </header>
</body>

Comments