How can I change the parents css property based on the childs class?

Question

I have a list of rows of two types. Each row consists of a number of fields. So basically each row has the following structure:

<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <div class="blue"> </div>
    </span>
  </div>      
</div>

The question for me is that I need to apply CSS property for the parent div with class="views-row" based on the class of the div, which is inside of the div class="fieldN". It may be either "blue" or "yellow".

So based on the class of a div tag which is stored inside of the span, I need to apply a border-left property for outer div class="views-row"

Could you please help me how can I implement this?

span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property! — Torjescu Sergiu, Aug 30 '18 at 13:43
What have you tried and what are the style to apply ? theres tricks via a pseudo and position to fake background or borders, but there's no parent selector if you want to do more styling. — G-Cyrillus, Aug 30 '18 at 14:01
It can be done from the child using a pseudo and setting position relative/absolute to both parent and child., you do not need in this a parent selector. — G-Cyrillus, Aug 30 '18 at 14:22

JoelDoryoku · Answer 1 · 2018-08-30T18:12:54.030

If I understand your question well, as far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.

It'd be wonderful if you could do something like div[div.a] or div:containing[div.a] as you said, but this isn't possible.

You may want to consider looking at JQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.

If you use jQuery, something along the lines of this would may work (untested but the theory is there):

$('div:has(div.a)').css('border', '1px solid red');

or,

$('div:has(div.a)').addClass('redBorder');

combined with a CSS class:

.redBorder
{
    border: 1px solid red;
}

Here's the documentation for the JQuery "has" selector.

G-Cyrillus · Accepted Answer · 2018-08-30T14:41:12.757

For a single border, there is no need of a parent selector you may fake it via position and a pseudo

.views-row {
border-left:solid red;
position:relative;
}
.views-row .blue:before {
content:'';
position:absolute;
top:0;
left:-3px; /* border width of parent if any */
bottom:0;
border-left:solid blue;
}
.views-row .yellow:before {
content:'';
position:absolute;
top:0;
left:-3px; /* border width of parent if any */
bottom:0;
border-left:solid yellow;
}

<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class="blue">i have a blue class, my parent should show a blue left border </span>
    </span>
  </div>      
</div>
<hr>
<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class="yellow"> i have a yellow class, my parent should show a yellow left border</span>
    </span>
  </div>      
</div>
<hr>
<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class=""> My class does not matter here, original red left border of parent remains seen</span>
    </span>
  </div>      
</div>

NOTICE: HTML structure is now valid, a span can only wrap phrasing content, no block content. the inside div was turned into a span to validate.

@badm ?? what do you mean, you wanted a different border on views-row according to the class of the span child . this what it does , blue gives a left blue border and yellow gives a yellow left border .... If that is not what you want then clarify . and yes it does not affect the outer div because parent selector does not exist as stated many times before and this is a CSS work around, this is no magic nor javascript ;) — G-Cyrillus, Aug 30 '18 at 14:43

How can I change the parents css property based on the childs class?

2 Answers2