seo Question posted in
Some basic information to get you started with this can be found here.

CSS nth-child() and :eq() doesn't work in my code – SEO

In my code I try to acces the a links to make each one a different color.I have used nth-child or :eq but doesn’t work.

I have a div wrapper and inside 3 divs each one with a link. I want to select each link with a number inside the offers div wrapper.

Please someone tell me if I picked up the wrong selector or if my CSS is wrong.

.offers-box a:nth-of-type(1) {
  color: #3F265F;
}
.offers-box a:nth-of-type(2) {
  color: #F04B5B;
}
<div class="offers m-t-50 m-b-15">
  <div class="row">

    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE STANDARD</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE CORPORATE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box offers-last-box">
        <div class="row">
          <div class="col-md-12">
            <h3>COMMUNICATIONS STANDARD TELEPHONIQUE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <p><span class="blue-color">Le portail unifie</span> de vos communications d'entreprises</p>
            <img src="/images/image.png" class="img-responsive" alt="Responsive image">
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->

  </div>
  <!--row-->
</div>
<!--offers-->
Tags:

2

Answers


  1. 0

    You have only one a tag inside each .offers-box, therefore :nth-of-type(1) can not work since its a zero based index.

    I think this might be what you wanted to do

    .offers-box:nth-of-type(1)  a {
    color: #3F265F;
}
.offers-box:nth-of-type(2) a {
    color: #F04B5B;
}
    Login or Signup to reply.
  2. 0

    the divs with class .offers-box are NOT siblings so you can’t use nth-child or first-child etc.

    .offers-box:nth-of-type() doesn’t work because using :nth-of-type(1) will select all the .offers-box because every element with that class is the only child of its parent . .offers-box is the only child of the col-md-4

    the same with .offers-box a:nth-of-type() , each a is the only a inside the .offers-box div

    the three .col-md-4 are siblings and the ONLY children of the same parent .offers > .row so you can use them.

    in each .col-md-4 there is a .offers-box so use the below code to achieve what you need.

    let me know if it works

    .col-md-4:first-child .offers-box a {
  color: red;
}
.col-md-4:nth-child(2) .offers-box a {
  color: green;
}
    <div class="offers m-t-50 m-b-15">
  <div class="row">

    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE STANDARD</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box">
        <div class="row">
          <div class="col-md-12">
            <h3>OFFRE CORPORATE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <h5>Votre activite &amp; commerce est optimises</h5>
            <ul>
              <li>Inclus:</li>
              <li>- Vitrine commerciale</li>
              <li>- Systeme de commerce</li>
              <li>- Systeme de reservation</li>
              <li>- Annonces commerciale "SEO"</li>
              <li>- Passerelle multidifusion auto: xml, etc</li>
              <li>- Passerelle multidifusion immo: idx, xml, etc</li>
            </ul>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->



    <div class="col-md-4 ">
      <div class="offers-box offers-last-box">
        <div class="row">
          <div class="col-md-12">
            <h3>COMMUNICATIONS STANDARD TELEPHONIQUE</h3>
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12">
            <p><span class="blue-color">Le portail unifie</span> de vos communications d'entreprises</p>
            <img src="/images/image.png" class="img-responsive" alt="Responsive image">
          </div>
        </div>
        <!--row-->
        <div class="row">
          <div class="col-md-12 text-center offers-button">
            <a href="#" title="Click here">DECOUVRIR L'OFFRE</a>
          </div>
        </div>
        <!--row-->
      </div>
      <!--offers-box-->
    </div>
    <!--col-md-4-->

  </div>
  <!--row-->
</div>
<!--offers-->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search