Select a specific division element using a pseudo element

My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div named .counter-wrap.

I initially attempted to use .counter-wrap: last-of-type, but it did not work as each .counter-wrap resides within its own .col class. Is there a way to achieve this using a pseudo-element, or would assigning a unique ID to the last .counter-wrap and setting margin-bottom: 0 be a better approach?

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>

htmlcsscss-selectorsflexbox

Answer №1

Implement the last-of-type selector on the col class in this manner:

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

View the demonstration 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>

Answer №2

Kindly review the updated code. Simply make changes to the CSS as instructed, and you will achieve the desired outcome.

.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>

Answer №3

To target a specific child element, you can utilize the nth-child() rule. Simply apply it to the parent element and specify the number of the child you want to style. For example:

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


    /* CSS Styles */
    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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

htmlangulartypescript

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

htmltypescriptckeditorangular2-forms

The child divs are not adjusting to the height of the parent container

My goal is to have the height of the children div .cell fill up 100% of the parent's height, but it doesn't seem to be working. This is the HTML code: <div class="header"> header </div> <div class="wrapper"> <di ...

htmlcssheight

What's the trick to aligning navigation items side by side?

I'm currently working with the code snippet below: header { height: 110px; width: 100%; margin-bottom: 130px; position: fixed; top: 0; z-index: 11; /*additional styling removed*/ } nav ul { list-style: none; paddin ...

htmlcsscss-float

Set the search input to occupy the full width of the container by utilizing Bootstrap's

I'm having trouble adjusting the width of my search input to 100% on screen resize (using @media (max-width: 1200px)). The issue: https://i.sstatic.net/EMr6W.jpg Here's how it should look (I can achieve this with a specific pixel width, but not ...

htmlcssformstwitter-bootstrap

Adjust the size of a div using absolute positioning

Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...

csscss-grid

There are two notable problems with Bootstrap 4 Tooltip. The first is that it appears when a button is clicked, and the second is that it shows up for disabled elements

I am currently experiencing an issue with my tooltip while using Bootstrap 4. In my index.html, I have the following script loaded: $('body').tooltip({ selector: '[data-toggle="tooltip"]', delay: { show: 550, hide: 0 } }); The proble ...

javascriptjqueryhtmlbootstrap-4tooltip

Ways to focus on a specific div using JavaScript

I am attempting to create a 'snow' effect on the background of a particular div with a red border. Here is the code, but you can also view it here: <!-- language: lang-js --> var width = getWidth(); var height = getH ...

javascriptjqueryhtmlcss

attempting to eliminate on-screen buttons by hovering over the video

Is there a way to make my video play on loop like a GIF without the controls ever showing? I want it to have a seamless playback experience. Any ideas would be appreciated. P.s. Don't worry about any StackOverflow errors when running the snippet. Than ...

javascripthtmlcss

Generate HTML content using AngularJS

Is there a way to format a string as HTML when using it in the following syntax: <div> {{ text }} </div> Instead of displaying the actual HTML, only the text is shown - for example " ab " ...

javascripthtmlangularjshtml-rendering

Connecting a PHP file to an HTML file without using Ajax may seem challenging, but it

When designing a web page that involves an HTML form for user input to be processed by PHP and then displayed back on the page as another HTML form, how should this process be approached? For example, if I have an index.html file with the initial form, wh ...

phphtml

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

htmlangulartypescript

Tips for arranging a menu horizontally with buttons in CSS

I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at . My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution. Curre ...

cssmenualignment

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

Apply a Fade In transition to the ul li elements following a JavaScript toggle

I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expe ...

javascriptcssanimationnavigationtransition

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

phphtml

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements w ...

htmlcssflexbox

Struggling to make AngularJS routes function properly

After starting from scratch, I rebuilt it with freshly downloaded angularJS (version 1.5.8). I simply placed both angular.js and angular-route.js in the library folder following this setup: https://gyazo.com/311679bf07249109671d621bc89d2d52 Here is how in ...

javascripthtmlangularjs

Is there a way to eliminate the CSS width and height properties and instead establish a custom max-width for an image tag?

Currently, I have incorporated my theme's CSS file into my application and it contains the following code: .status .who img { float: left; height: 40px; margin-right: 10px; width: 40px; } However, I want it to appear like this: .status .who ...

jqueryhtmlcss