Why Is Nth-Child Selector Not Working

Why is nth-child selector not working?

The nth-child selector counts siblings (i.e., elements having the same parent).

In your HTML structure, div.social-logo is always the first, last and only child of a. So nth-child has only one element to count.

However, there are multiple anchor elements, all of which are siblings (children of #social-links), so nth-child can target each one.

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
              .
              .
              .

Why is nth-child selector not working in css?

nth-child counts in relation to its parent, and .list-group-item is the only child of its parent in your example. You could change this in a variety of ways, including by counting the outermost elements as shown here.

.new-class:nth-child(1) .list-group-item  {    border-right: 3px solid yellow;}
.new-class:nth-child(2) .list-group-item  {    border-right: 3px solid red;}

<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">    <div class="views-field views-field-title">        <span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span>    </div></div>
<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">    <div class="views-field views-field-title">        <span class="field-content list-group-item">Googke<a href="/app/wall/content/"></a></span>    </div></div>

:first-child and :nth-child(1) not working

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

The correct selector is .contacts p:first-child

If you wanted it to work only based on the container and not know or care what it contains you could use .contacts > *:first-child

When you use it as you are on the container what you are actually asking for via css is an element with the class .contacts that is the first child among it's sibling elements.

Nth child selector not working in css for background in CSS Grid

When using nth-child try to precise on the parent one when you apply it onto children sometimes won't work so select it by getting to cell as the parent like .cell:nth-child(3) .img-box .img

.box-container {
  list-style: none;
  margin: 0;
  width: 320px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.img-box {
  width: 180px;
  height: 180px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 0.15em 0.175em hsla(0, 0%, 0%, 0.1);
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  position: relative;
  border-radius: 5px;
}

.img {
  background-image: url("https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/08/Fotolia_128673803_Subscription_Monthly_M.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 99.94%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.row:nth-child(1) .cell:nth-child(1) .img-box .img {
  background: red;
}

.row:nth-child(1) .cell:nth-child(2) .img-box .img {
  background: green;
}

.row:nth-child(1) .cell:nth-child(3) .img-box .img {
  background: blue;
}

.row:nth-child(2) .cell:nth-child(1) .img-box .img {
  background: cyan;
}

.row:nth-child(2) .cell:nth-child(2) .img-box .img {
  background: skyblue;
}

.row:nth-child(2) .cell:nth-child(3) .img-box .img {
  background: darkcyan;
}

.row:nth-child(3) .cell:nth-child(1) .img-box .img {
  background: maroon;
}

.row:nth-child(3) .cell:nth-child(2) .img-box .img {
  background: tomato;
}

.row:nth-child(3) .cell:nth-child(3) .img-box .img {
  background: dodgerblue;
}

.img.active {
  width: 50%;
  height: 50%;
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline {
  width: 50%;
  height: 50%;
  position: absolute;
  -webkit-transform: translate(210%, 0px);
  -ms-transform: translate(210%, 0px);
  -o-transform: translate(210%, 0px);
  transform: translate(210%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline.active {
  -webkit-transform: translate(110%, 0px);
  -ms-transform: translate(110%, 0px);
  -o-transform: translate(110%, 0px);
  transform: translate(110%, 0px);
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

.headline h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  color: #333;
  font-size: 1.1em;
  width: 80%;
}

.cell {
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="grid">
  <div class="box-container">
    <div class="row">
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Internet Services</h2>
          </div>
          <div class="text">
            <p>Safe, secure and cost-efficient broadband.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Security and Web Filter</h2>
          </div>
          <div class="text">
            <p>Security, e-safety and web-filtering services.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Infra Services</h2>
          </div>
          <div class="text">
            <p>Infrastructure solutions for your school.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Cloud Provision</h2>
          </div>
          <div class="text">
            <p>Leverage the benefits of the cloud.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Telephony Provision</h2>
          </div>
          <div class="text">
            <p>Modern, cost-effective telephony.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Finance Option</h2>
          </div>
          <div class="text">
            <p>Financial plans to suit your schools budget.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Network Services</h2>
          </div>
          <div class="text">
            <p>Wireless and switched infrastructure.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Data Services</h2>
          </div>
          <div class="text">
            <p>Information on our data services.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="img-box">
          <div class="img"></div>
          <div class="headline">
            <h2>Support Provision</h2>
          </div>
          <div class="text">
            <p>Learn about our expert ongoing support.</p>
            <a href="">Read more <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>

CSS nth-child is not working based on my expectation

This is because the first service-box is actually the second child of its parent, center-text being the first. Remove center-text and use .service-box:nth-child(3).

.service-box:nth-child(3) {  background-color: red;}

<div class="our-services">  <div class="service-box">    <h3 class="center-text">Service 1</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div>  <div class="service-box">    <h3 class="center-text">Service 2</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div>  <div class="service-box">    <h3 class="center-text">Service 3</h3>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>  </div></div>

nth-child css selector not working correctly if we had br tag in sibling of children elements

The queries work as expected. When you run .div1>span:nth-child(2) you are requesting for a span element that is the second child of its parent, in this case div1. Second child of div1 is a <br> and therefore you get null.

As suggested by Hao Wu, you should use :nth-of-type

document.querySelector(".div1>span:nth-of-type(2)")
This will search for the second span element that is a child of div1

console.log("i have 5 span children as well : ", document.querySelectorAll(".div1>span").length);

console.log("second span child is null : ", document.querySelector(".div1>span:nth-of-type(2)"));

console.log("third span child is second span element : ", document.querySelector(".div1>span:nth-of-type(3)").textContent);

console.log("select second element by another way: ", document.querySelectorAll(".div1>span")[1].textContent);

console.log("tag name of second child: ", document.querySelector(".div1>*:nth-child(2)").tagName);

html>body>div.div1>span:nth-of-type(2) {
  color: blue;
}

<html>

<body>
  <div class="div1">
    <span>this is example text 1</span>
    <br>
    <span>this is example text 2</span>
    <br>
    <span>this is example text 3</span>
    <br>
    <span>this is example text 4</span>
    <br>
    <span>this is example text 5</span>
    <br>
  </div>
</body>

</html>

nth-child selector not working(?) in css

You can use a pseudo element like this:

   p:first-child {
    background-color: red;
}

but if you are going to have more paragraphs you should put it inside a div and make this:

<div class="paragraphs">
<p>paragraph1</p>
<p>paragraph2</p>
<p>paragraph3</p>
<p>paragraph4</p>
</div>

and use this:

.paragraphs p:first-child {
        background-color: red;
    }