CODEWITHSUNDEEP
htmlcsscss-selectorsflexbox
rufus
rufus

Reputation: 857

Target specific div with pseudo element

I'am trying to simply target the third div in my html with a class of .counter-wrap. On a mobile device this div has a margin-bottom of 40px. I want to remove the margin-bottom on the third stacked div named .counter-wrap.

I thought I could simply do .counter-wrap: last-of-type but the reason this doesn't work I believe is because each .counter-wrap is in its own .col class. Can this be done with a pseudo element or would I be better off just using a unique id on the last .counter-wrap div and just apply margin-bottom: 0?

body {
  color: black;
  font-size: 15px;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

.container,
.container-long {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.counter-wrap {
  margin-bottom: 40px;
}

.counter-text,
.counter-number {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

.counter-text {
  letter-spacing: normal;
  font-weight: 400;
}

.counter-number {
  font-size: 60px;
  font-weight: 500;
}
<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 359

Answers (3)

ProEvilz
ProEvilz

Reputation: 5455

You can use the nth-child() rule. Apply it to the parent element and then input the number of which child class you wish to target. In this case it would be

.col:nth-child(3) .counter-wrap {
background:red;
}


    body {
      color: black;
      font-size: 15px;
    }

    .wrap {
      width: 600px;
      margin: 0 auto;
    }

    .container,
    .container-long {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto
    }

    .row {
      margin-left: -15px;
      margin-right: -15px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .col {
      position: relative;
      padding-right: 15px;
      padding-left: 15px;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
    }


    .counter-wrap {
      margin-bottom: 40px;
    }

    .counter-text,
    .counter-number {
      display: block;
      text-align: center;
      text-transform: uppercase;
      color: black;
    }

    .counter-text {
      letter-spacing: normal;
      font-weight: 400;
    }

    .counter-number {
      font-size: 60px;
      font-weight: 500;

    }


    .col:nth-child(3) .counter-wrap {
      background:red;
    }
    <div class="wrap">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="counter-wrap">
              <span class="counter-text">Line1</span>
              <span class="counter-number count">1234</span>
              <span class="counter-text">Line 2</span>
            </div>
          </div>
          <div class="col">
            <div class="counter-wrap">
              <span class="counter-text">Line1</span>
              <span class="counter-number count">1234</span>
              <span class="counter-text">Line 2</span>
            </div>
          </div>
          <div class="col">
            <div class="counter-wrap">
              <span class="counter-text">Line1</span>
              <span class="counter-number count">1234</span>
              <span class="counter-text">Line 2</span>
            </div>
          </div>
        </div>
      </div>
    </div>

Upvotes: 2

kukkuz
kukkuz

Reputation: 42362

Use last-of-type selector on the col class like this:

.col:last-of-type .counter-wrap {
  margin-bottom: 0;
}

See demo below:

body {
  color: black;
  font-size: 15px;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

.container,
.container-long {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.counter-wrap {
  margin-bottom: 40px;
}

/*ADDED*/
.col:last-of-type .counter-wrap {
  margin-bottom: 0;
}

.counter-text,
.counter-number {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

.counter-text {
  letter-spacing: normal;
  font-weight: 400;
}

.counter-number {
  font-size: 60px;
  font-weight: 500;
}
<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Anmol Sandal
Anmol Sandal

Reputation: 1488

Please check the updated code. You only need to update this css rest you will get the desired result.

.wrap .col:last-child .counter-wrap {
  margin-bottom: 0;
}


body {
  color: black;
  font-size: 15px;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

.container,
.container-long {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.counter-wrap {
  margin-bottom: 40px;
}

.counter-text,
.counter-number {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: black;
}

.counter-text {
  letter-spacing: normal;
  font-weight: 400;
}

.counter-number {
  font-size: 60px;
  font-weight: 500;

}

.wrap .col:last-child .counter-wrap {
  margin-bottom: 0;
}
<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
      <div class="col">
        <div class="counter-wrap">
          <span class="counter-text">Line1</span>
          <span class="counter-number count">1234</span>
          <span class="counter-text">Line 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions