CSS code for "Ancestor Of"

Question

CSS code for "Ancestor Of"

Imagine I have this snippet of HTML

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>

If I want to change the background color to yellow of the "SELECT ME" div only, how can I achieve that without affecting the other elements? I thought it could be done like this:

.root>:not(.A) .B { background: yellow; }

However, this doesn't seem to work and I am not sure why. My searches online haven't provided a solution either. Is it possible to accomplish this with CSS?

html css

Answer 1

Answer №1

.X {
  border: thin purple dashed;
}

.Y {
  border: thick orange solid;
}

.parent > .Y {
  background-color: pink;
}

.X > .Y {
  background-color: blue;
}

<div class="parent">
  <div class="X">
    <div class="Y">
      AVOID SELECTING THIS
    </div>
  </div>

  <div class="Y">
    CHOOSE ME
  </div>

  <div class="X">
    <div class="Z">
      <div class="Y">
        ALSO AVOID THIS
      </div>
    </div>
  </div>
</div>

Targeting .Y as a direct descendant of .parent succeeds:

.parent>.Y { background: pink; }

Targeting .Y as a direct descendant of .X would enable different styling for the .X > .Y selectors:

.X>.Y { background: blue; }

Answer 2

.X {
  border: thin purple dashed;
}

.Y {
  border: thick orange solid;
}

.parent > .Y {
  background-color: pink;
}

.X > .Y {
  background-color: blue;
}

<div class="parent">
  <div class="X">
    <div class="Y">
      AVOID SELECTING THIS
    </div>
  </div>

  <div class="Y">
    CHOOSE ME
  </div>

  <div class="X">
    <div class="Z">
      <div class="Y">
        ALSO AVOID THIS
      </div>
    </div>
  </div>
</div>

Targeting .Y as a direct descendant of .parent succeeds:

.parent>.Y { background: pink; }

Targeting .Y as a direct descendant of .X would enable different styling for the .X > .Y selectors:

.X>.Y { background: blue; }

Answer 3

Answer №2

If you want to style specific elements using CSS, consider utilizing the nth-child rule. You can find more details here

.B:nth-child(2) {
   background-color: yellow;
}

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}
.B:nth-child(2) {
   background-color: yellow;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>

Answer 4

If you want to style specific elements using CSS, consider utilizing the nth-child rule. You can find more details here

.B:nth-child(2) {
   background-color: yellow;
}

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}
.B:nth-child(2) {
   background-color: yellow;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>

CSS code for "Ancestor Of"

Answer №1

Answer №2

Similar questions

Bold font border

Creating a scrollable container using CSS

Bootstrap component malfunctioning and not performing as expected

Innovative dropdown menu featuring images and informative text snippets

Is it possible to nest a container tag within a container-fluid tag?

Ways to show error messages from a JSON reply within a DIV element

Tips for positioning divs at the bottom of the screen while making them inline and overlapping their parent div

Tips for arranging two divs from a single column to display side by side on smaller screens instead of stacked on top of each other

Utilizing the p tag to incorporate dynamic data in a single line

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Transform the styles from a React component into Cascading Style Sheets

Generate a visually striking text overflow effect on an image

Combining jQuery functions for a smooth user experience: fadeOut, live, and delay all working together in a div fade

Animating an image inside a bordered div

What is preventing me from opening this local html page without an IIS Server?

I'm experiencing an issue where the graph created using Flot isn't being displayed

How to vertically center a div within a parent div with a fixed position?

What is the best way to display SQL data in PHP using div elements?

The Z-index property does not seem to be functioning properly for a drop-down component that is located within a disclosure panel

What is the best way to sort out the <li> elements within a <ul> that has a specific id