Select outer parent frame from child in css

Question

Good day all,

I have an a tag with class "WORKSHEET_block" and which is contained in 3 other div.

The css to style is (which does not work):

.WORKSHEET_block < .fc-daygrid-event-harness < .fc-daygrid-day-events < .fc-daygrid-day-frame {
  background-color: green !important;
}

<div class="fc-daygrid-day-frame">
  <div class="fc-daygrid-day-events">
    <div class="fc-daygrid-event-harness">
      <a class="WORKSHEET_block">My Value</a>
    </div>
  </div>
</div>

I know if it was the other way around from parent to child we would use ">" from the parent to the child.

Is there anywhere I can select the parent from the child?

Can't you invert the selector to look like this? `.fc-daygrid-day-frame > .fc-daygrid-day-events > .fc-daygrid-event-harness > .WORKSHEET_block` — CrystalSpider, Jan 14 '23 at 16:30

score 1 · Accepted Answer · answered Jan 14 '23 at 16:39

.fc-daygrid-day-frame:has(.WORKSHEET_block) {
    background-color: green;
}

<div class="fc-daygrid-day-frame">
  <div class="fc-daygrid-day-events">
    <div class="fc-daygrid-event-harness">
      <a class="WORKSHEET_block">This is the child using the class</a>
    </div>
  </div>
</div>

<div class="fc-daygrid-day-frame">
  <div class="fc-daygrid-day-events">
    <div class="fc-daygrid-event-harness">
      <a>this child does not have any class</a>
    </div>
  </div>
</div>

Using :has relative selector. I have inserted an extra HTML code it doesn't have a WORKSHEET_block class, so the style is not applying to it

Select outer parent frame from child in css

1 Answers1