How do I style a div but only if it has an H1 as its first child?

Question

Is there a way that I can add text-align:center to all div.wpb_wrapper which have h1 as the first child? One of the reasons I need this is that there are multiple div.wpb_wrapper that have the same parent, but not all have <h1> as the first child.

In the example below I only want to style the second div.

<div class="wpb_wrapper">
   <h2>Other text</h2>
   <p>Other text</p>   
</div>
<div class="wpb_wrapper">
   <h1>Text</h1>
   <h2>Other text</h2>
   <p>Other text</p>   
</div>

EDIT: I can't apply text-align center to h1 because it is has display: inline-block; already applied. That's why I need to style the parent.

You cannot style a parent based on a condition of child with pure CSS. anyways in Jquery you can do it easily — Rajshekar Reddy, Apr 25 '16 at 11:49
@Quentin, that's bad. We know that there's no CSS parent selector, but the OP needs a working solution. This is not a dupe. — Praveen Kumar Purushothaman, Apr 25 '16 at 11:53
@Metzed, I am trying to support your case, someone voted me down and tells that this is not what you expect. Can you please clarify them that this is a better solution? — Praveen Kumar Purushothaman, Apr 25 '16 at 11:54

Praveen Kumar Purushothaman · Accepted Answer · 2016-04-25T12:15:32.713

4

You cannot access the parent in CSS as of now. But you can do something like this:

Alternate Solution

As there's no CSS Parent Selector, we can apply text-align: center for all the elements that are siblings and the <h1> itself this way:

.wpb_wrapper > h1:first-child,
.wpb_wrapper > h1:first-child ~ * {
  text-align: center;
}

This will apply text-align: center to all the siblings. This way, the <h2> and <p> tags will be aligned center.

Let's try here:

.wpb_wrapper > h1:first-child,
.wpb_wrapper > h1:first-child ~ * {
  text-align: center;
}

<div class="wpb_wrapper">
   <h2>Other text</h2>
   <p>Other text</p>   
</div>
<div class="wpb_wrapper">
   <h1>Text</h1>
   <h2>Other text</h2>
   <p>Other text</p>   
</div>

According to the OP:

I want to style the second div only. I do not want to center the text in the first div. I only want to center text in the div when it has an H1 as the first child. And I can't apply text-align center to h1 because it is has display: inline-block;.

So the only way would be:

.wpb_wrapper > h1:first-child ~ * {
  text-align: center;
}

Or using JavaScript or jQuery and using the .closest() this way:

$(".wbp-wrapper > h1:first-child").each(function() {
    $(this).closest(".wbp-wrapper").css("text-align", "center");
});

edited Apr 25 '16 at 12:15

answered Apr 25 '16 at 11:50

Praveen Kumar Purushothaman

164,888
24
203
252

I seriously don't understand the reason for `-1`, when I can clearly demonstrate this solution works flawlessly. – Praveen Kumar Purushothaman Apr 25 '16 at 11:52
See question clearly. `center` property should be applied to parent `div` not to siblings. – niyasc Apr 25 '16 at 11:52
2

@niyasc What's the difference in this case? Don't think like a machine. We need solution, if not, an alternate. This is an alternate using pure CSS. – Praveen Kumar Purushothaman Apr 25 '16 at 11:54
`is there a way that I can add text-align:center to all div.wpb_wrapper which have h1 as the first child?`. That means, everything inside div should be centre aligned if there is an `h1` tag as first child. – niyasc Apr 25 '16 at 11:55
Good solution. Consider centering the h1 also. `.wpb_wrapper > h1:first-child ~ *, wpb_wrapper > h1 {text-align: center;}` – Moob Apr 25 '16 at 11:55
@PraveenKumar may be you can write a bolded text saying "Alternate solution" So that people dont bounce back with -1's – Rajshekar Reddy Apr 25 '16 at 11:57
I want to style the second div only. I do not want to center the text in the first div. I only want to center text in the div when it has an `H1` as the first child. And I can't apply text-align center to `h1` because it is has ` display: inline-block;` – Metzed Apr 25 '16 at 12:02
@Metzed Then see the first solution. Lemme add it for you. – Praveen Kumar Purushothaman Apr 25 '16 at 12:13
@Metzed Pure CSS might be possible if you are more clear. But I have also added the jQuery way too. – Praveen Kumar Purushothaman Apr 25 '16 at 12:15

score 0 · Answer 2 · answered Apr 25 '16 at 12:09

Unfortunately you can't do that with CSS only.

If you are already using jQuery you could do this:

Javascript:

$('.wbp-wrapper > h1:first-child').each(function(){
    $(this).closest('.wbp-wrapper').addClass('centered');
});

CSS:

.centered {
    text-align: center;
}

How do I style a div but only if it has an H1 as its first child?

2 Answers2