How to set style to a div that selected by :last-child-CodePudding

I'm trying to set a style for the header shown in below pug template:

.section1
  .dropdown-card
  .dropdown-card
  .dropdown-card
    .header

I'm able to select last dropdown-card class in the section1 using :last-child pseudo-class. Like this:

  .dropdown-card:last-child{
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

But, I'm not able to select .header which is inside of .dropdown-card class. These methods not working:

.dropdown-card:last-child .header {}
.dropdown-card:last-child > .header {}

How can I do that?

CodePudding user response：

That .dropdown-card:last-child .header work like:

.dropdown-card:last-child .header {
  border: 1px solid red;
}

<div >
  <div >
    <p>
      content
    </p>
  </div>
  <div >
    <p>
      content
    </p>
  </div>
  <div >
    <div >
      <p>
        content
      </p>
    </div>
  </div>
</div>

My suspect you try to use .header with pure tag header, if yes just use .dropdown-card:last-child header, same code without "point", because is not a class.

.dropdown-card:last-child header {
  border: 1px solid red;
}

<div >
  <div >
    <p>
      content
    </p>
  </div>
  <div >
    <p>
      content
    </p>
  </div>
  <div >
    <header>
      <p>
        content
      </p>
    </header>
  </div>
</div>

CodePudding user response：

If the header class is inside the .dropdown-card class then remove :last-child from your code -

.dropdown-card .header {}