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

Html – In a nested tree, how can I select only the first element of certain class anywhere in the entire tree?

I have the following jsfiddle:

https://jsfiddle.net/gdvx89s6/23/

As you can see, I have record nested inside another record:

* {
  font-weight: 700;
  font-size: 30px;
}

.record {
  padding-left: 20px;
}

.buttons {
  display: flex;
  gap: 20px;
}

.record[data-reaction="1"] .up {
  color: green;
}

.record[data-reaction="-1"] .down {
  color: red;
}
<div class="record" data-reaction="1">
  <div class="something">
    <div class="content">
      <div class="buttons">
        <span class="up">UP</span>
        <span class="down">DOWN</span>
      </div>
    </div>
  </div>
  <div class="separator">-----------------</div>
  <div class="record" data-reaction="-1">
    <div class="something">
      <div class="content">
        <div class="buttons">
          <div class="buttons">
            <span class="up">UP</span>
            <span class="down">DOWN</span>
          </div>
        </div>
      </div>
    </div>
    <div class="separator">-----------------</div>
  </div>
</div>

I want the up span to be green if the data-reaction is 1. I want the down span to be red if the data-reaction is -1.

Right now, since the second record is nested inside the first record, the up span in the second record is also being set to green. How can I avoid that?

enter image description here

I have tried adding a :not(.record) as such to "break the chain" but it doesn’t work:

.record[data-reaction="1"] :not(.record) .up {
  color: green;
}


.record[data-reaction="-1"] :not(.record) .down {
  color: red;
}

NOTE that the record being nested inside another record can have multiple elements in between (in this easy example, it’s directly nested at the first level but that’s not always going to be the case).

I am trying to prevent having to specify the entire chain because there can be multiple elements in between.

Tags:

2

Answers


  1. 0

    By adding a rule that uses the separator and initial it should do what you want:

    * {
  font-weight: 700;
  font-size: 30px;
}

.record {
  padding-left: 20px;
}

.buttons {
  display: flex;
  gap: 20px;
}

.record[data-reaction="1"] .up {
  color: green;
}

.record[data-reaction="-1"] .down {
  color: red;
}
.separator + .record[data-reaction="-1"] .up, .separator + .record[data-reaction="1"] .down {
  color: initial;
}
    <div class="record" data-reaction="-1">
  <div class="something">
    <div class="content">
      <div class="buttons">
        <span class="up">UP</span>
        <span class="down">DOWN</span>
      </div>
    </div>
  </div>
  <div class="separator">-----------------</div>
  <div class="record" data-reaction="1">
    <div class="something">
      <div class="content">
        <div class="buttons">
          <div class="buttons">
            <span class="up">UP</span>
            <span class="down">DOWN</span>
          </div>
        </div>
      </div>
    </div>
    <div class="separator">-----------------</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    For this particular case, you may be able to get away with specifying up and down in both conditions:

    .record[data-reaction="1"] .up {
  color: green;
}
.record[data-reaction="1"] .down {
  color: black;
}


.record[data-reaction="-1"] .up {
  color: black;
}
.record[data-reaction="-1"] .down {
  color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search