Html Question posted in
Some basic documentation can be found here.

Html – Is there a CSS only way to target the last nested element by className?

.parent .child:last-child {
  color: red;
}
<div class="parent">
  <div class="child">
  text
    <div class="child">
      text
      <div class="child">text</div>
    </div>
  </div>
</div>

I would only like the text of the last nested child to have a font-color of red. is this acheivable with CSS only?

Tags:

2

Answers


  1. 0

    You can use the :not() selector in combination with :has() to dynamically target the innermost .child div:

    .child:not(:has(.child)) {
  color: red;
}
    <div class="parent">
  <div class="child">
  text
    <div class="child">
      text
      <div class="child">text</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    the selector would something like a div with class child that has not a child with class child : .child:not(:has(.child))

    .child:not(:has(.child)) {
  color: red;
}
    <div class="parent">
  <div class="child">
    text
    <div class="child">
      text
      <div class="child">text</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search