0

Hi I have a scenario where I have to style a h3 element based on parent div class

Example:

<div class="First">
 <p>This is sample text</p>
</div>
<div class="Second">
 <h3>This is sample header</h3>
</div>

Now what I want to do is if there is a p tag inside class named First, I want to change the style of h3 tag of second class.

Tuan Ha
  • 620
  • 2
  • 8
  • 25
Raj001
  • 9
  • 3
  • with only `css` it cannot be achieved to detect whether `p` is a child of `div.First`. You need to make use of either `javascript` or its library like `jQuery`, etc. – Shashank Feb 26 '16 at 10:19
  • Thanks Shashank, But is there anyway we can do it only using css like div[class="First"] p ~ div[class="Second"] h3 { color: red; } not exactly the above code but something like that where I can indicate that the "First" div is closed. – Raj001 Feb 26 '16 at 10:23
  • But if you want to change HTML structure and put `.Second` in `.First` then you can do something like this https://jsfiddle.net/Lg0wyt9u/92/ – Nenad Vracar Feb 26 '16 at 10:33
  • @Raj001, when you are going down the hierarchy from `div.First` to `p`, then in `CSS` there is no way to refer/target back to the parent. The only way one could do, is by `JavaScript`. In your case, you wish to target the child element of the next `div` and not the `sibling` of the same div. Had it been like, if `h3` was the next sibling of `p` then the CSS approach would have been useful, you can only make it to work by JS itself. – Shashank Feb 26 '16 at 10:43
  • @NenadVracar, there is no point in giving the response by the `tag` which itself is not there. Please note, only `css` tag is there, if it is possible then only provide him the answer, otherwise suggest him by educating the same. – Shashank Feb 26 '16 at 10:46

1 Answers1

0

Answer: Without altering the HTML, this is currently not possible with CSS alone.

Further information: The CSS Selectors Level 4 specs introduce(d) the new parent selector $:

$div > p {
    // styles here
}

The selector above would target the div, not the p. Of course, only divs, which have a direct p child element. Still, this wouldn't help much with further additions and as BoltClock noted, the specs haven't been revised for a couple of years and a parent selector might not even come soon.

Paul
  • 8,974
  • 3
  • 28
  • 48
  • The $ syntax has been gone for years, but more importantly, the selectors-4 WD hasn't been updated since 2013 even though many, *many* changes have been made since, including [removing the "parent selector" altogether](http://stackoverflow.com/a/27983098). I recommend simply not providing samples or referencing the specification at this time. Furthermore, that revision of the specification doesn't define if the $ notation can be used to target the h3 based on the first div - so while you can target the first div, that alone isn't really going to help. – BoltClock Feb 26 '16 at 11:25
  • Thanks for the reply but is there any way that i could somehow mark the div closed in the css for example (div[class="First"] p ) ~ div[class="Second"] h3 { color: red; } I know that the above syntax is wrong but is there something we can close the div separately. – Raj001 Feb 26 '16 at 11:36
  • See my answer, with pure CSS this is not possible. You need to alter your HTML to be able to do that. – Paul Feb 26 '16 at 11:40