Last-Child and Last-Of-Type Not Working in SASS

last-child and last-of-type not working in SASS

Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}

Why last-child selector is not working in SCSS?

You would want to use last-of-type

 p {
    color: blue;   
    &:last-of-type {
      color: red;
    }
 }

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

EDIT: just for proof of concept

p {
  color: blue;
}
p:last-of-type {
  color: red;
}

<p>First</p>
<p>Second</p>
<div>Not a P</div>
<p>Third</p>

not of nth child selector not working in sass

You can achieve this doing by all the items bg blue and the first one's bg to white or whatever your background is.

<div class="list">
<div *ngFor="let item of data; let i=index"  [class.first]="i === 0">
    <input class="radio" name="radio" type="radio" />
<label for="radio1" class="lbl">{{item.name}}</label>

and your css should be like this:

label {
  background-color:blue;
}
.first label {
  background-color: #fff;
}

I assume your data is like that:

 data = [
    {name: "car"},
    {name: "truck"},
    {name: "bike"}
  ]

This is working example

Applying last child selector for Sass in menu

Your CSS is off. Your last line is targeting the last child of an li that's a child of an anchor tag. Also, you don't need to use & when targeting children of the selector you're nesting in.

So, change your last-child selection to:

li:last-child a

and it should work. You need to target the link in order to override your original link declaration.

SCSS :not(:last-child) but style is still applied to last element

The children are of the parent div. And in your case, the last-child is <div class="panel">. A
better wording would be: The element must be the last element, regardless of selectors.

.accordion:not(:last-child) {
  border-bottom: 1px solid darkgray;
}

<div class="parent">
  <div class="accordion">hi</div>
  <div class="accordion">hi</div>
  <div class="accordion">hi</div>
</div>

css/sass :not(:first-of-type) not working, is hiding all elements of type

In this case progress-body is not the first-of-type, this would technically be .panel-heading since the first-of-type refers to the type element selector (div) and not the class.

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

Ref: :first-of-type - CSS | MDN

Consider wrapping your .progress-body elements in a containing element, you will achieve the expected behaviour, since .progress-body would be the first of its type with the class name .progress-body.

Code Snippet Demonstration:

.progress-body:not(:first-of-type) {  display: none;}

<div class="panel">  <div class="panel-heading">  </div>  <div class="panel-outer-body">    <div class="panel-body progress-body">      <div class="row">        <div class="col-md-12">          <p class="lead">Step 1: Choose your template...</p>        </div>      </div>    </div>    <div class="panel-body progress-body">      <div class="row">        <div class="col-md-12">          <p class="lead">Step 2: Compose your email...</p>        </div>      </div>    </div>  </div></div>

SASS :last-of-type pseudo-class from within a nested selector

SASS code

.row {
    
    border: 4px solid red;
    color: white;
    font-size: 20px;
    
    &-info {
        
        background-color: #444444;
        
        &-description {
            
            background-color: #666666;
            font-size: 12px;
            
            //Access :last-of-type here?
            .row:last-of-type &   {
                background-color: blue;
            }
        }

    }

}

CSS last child of anything without nesting?

To select only the last child of a container, one would use:

<selector> > :last-child {
    ...
}

In your case,

body > :last-child {
    ...
}

---

Related Topics