Incorporating the :after pseudo-element with the last-child selector within an Angular 2

Question

Incorporating the :after pseudo-element with the last-child selector within an Angular 2

HTML:

<h2 class="title-main">
     <span class="title-inside">X</span>
     <span class="title-inside">Y</span>
     <span class="title-inside">Z</span>
     <span class="title-inside">P</span>
     <span class="title-inside">Q</span>
     <span class="title-outside">R</span>
     <span class="title-outside">S</span>
</h2>

CSS:

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
        &:after {
            content : '.';
        }
    }
}

The rendered result is as follows

X.Y.Z.P.Q.R S

I am trying to avoid the dot for the last child. I want the output to look like this

X.Y.Z.P.Q R S

I have attempted various approaches. For instance, one of the methods I tried is shown below

.title-inside:last-child ::after {
           content: ''
    }

Unfortunately, this approach did not work. Can someone provide assistance?

html css sass css-selectors

Answer 1

Answer №1

One way to achieve this is by using the combination of :not and :nth-last-of-type()

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-inside:not(:nth-last-of-type(3))::after {
  content: '-';
}

<h2 class="title-main">
  <span class="title-inside">A</span>
  <span class="title-inside">B</span>
  <span class="title-inside">C</span>
  <span class="title-inside">D</span>
  <span class="title-inside">E</span>
  <span class="title-outside">F</span>
  <span class="title-outside">G</span>
</h2>

For a SASS version, you can refer to this link

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
        &:not(:nth-last-of-type(3)){
           &::after{
            content : '-';
           }
        }
    }
}

Answer 2

One way to achieve this is by using the combination of :not and :nth-last-of-type()

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-inside:not(:nth-last-of-type(3))::after {
  content: '-';
}

<h2 class="title-main">
  <span class="title-inside">A</span>
  <span class="title-inside">B</span>
  <span class="title-inside">C</span>
  <span class="title-inside">D</span>
  <span class="title-inside">E</span>
  <span class="title-outside">F</span>
  <span class="title-outside">G</span>
</h2>

For a SASS version, you can refer to this link

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
        &:not(:nth-last-of-type(3)){
           &::after{
            content : '-';
           }
        }
    }
}

Answer 3

Answer №2

When it comes to selecting elements using :nth-* and last-child, it is important to consider the actual element type rather than just the class name. This is why utilizing a class selector might be more effective.

An alternative approach is to use the ::before pseudo-element in combination with the sibling selector +. By doing so, the number of items within each class becomes irrelevant, as the counting will always be accurate.

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-main  .title-inside + .title-inside::before {
  content: '-';
}

<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-inside">D</span>
     <span class="title-inside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>


<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-outside">D</span>
     <span class="title-outside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>

SASS

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
      &+.title-inside {
        &::before{
          content : '-';
        }
      }
    }
}

Answer 4

When it comes to selecting elements using :nth-* and last-child, it is important to consider the actual element type rather than just the class name. This is why utilizing a class selector might be more effective.

An alternative approach is to use the ::before pseudo-element in combination with the sibling selector +. By doing so, the number of items within each class becomes irrelevant, as the counting will always be accurate.

.title-main {
  display: flex;
  margin-bottom: 0;
}

.title-main  .title-inside + .title-inside::before {
  content: '-';
}

<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-inside">D</span>
     <span class="title-inside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>


<h2 class="title-main">
     <span class="title-inside">A</span>
     <span class="title-inside">B</span>
     <span class="title-inside">C</span>
     <span class="title-outside">D</span>
     <span class="title-outside">E</span>
     <span class="title-outside">F</span>
     <span class="title-outside">G</span>
</h2>

SASS

:host/deep/.title-main {
    display: flex;
    margin-bottom: 0;

    .title-inside {
      &+.title-inside {
        &::before{
          content : '-';
        }
      }
    }
}

Incorporating the :after pseudo-element with the last-child selector within an Angular 2

Answer №1

Answer №2

Similar questions

Unable to change background image using jQuery

Copy the CSS path from Firebug and paste it into the command line suggested

Ways to include additional bars in your Animated jQuery, CSS, and HTML Bar Graph

Choosing radio buttons within rows that contain two radio buttons using ngFor

Where is the appropriate location to insert a <script> tag in NextJs?

Styling with CSS: Making a div's height fit within another div, including padding

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

Styling a numerical value to appear as currency with CSS

Is there a way to reuse a JSP chunk that is defined within a JSP page without the need to create a separate JSP

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Combine and store downloaded stylesheets in the browser into a single file

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Trouble with Updating InnerHTML

Creating a dynamic feature in React where multiple icons change color individually when hovered over, all implemented

Struggling to pass a function to a stateless functional component in React

Creating a large and spacious modal in Angular using ngx-bootstrap

Django does not support translation for filter labels

Information extracted from the database without considering any line breaks

A clever CSS hack for showing multiple UL lists with LI elements in different columns, based on the width of the webpage

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?