Is it possible setting conditional css based on hierarchy elements?

Question

Consider the following HTML:

<div>
   <p>
     <strong>Title</strong>
   </p>
   <p>
     some resular text....
   </p>
</div>

I want to add padding to paragraph only if it has 'strong' inside it.

Is it possible using CSS only (no JS)?

In your example couldn't you just add padding to the strong tag and it would produce the same result? — Charlie Fish, Jul 18 '16 at 03:53
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — DAXaholic, Jul 18 '16 at 03:54

score 0 · Answer 1 · answered Jul 18 '16 at 03:54

0

Yes, you would do this:

p > strong {
    padding:10px;
}

answered Jul 18 '16 at 03:54

Luka Kerr

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

Yes, you can. Refer this post for learning the rules.

HTML:

<div>
   <p>
     <strong>Title inside paragraph</strong>
   </p>
   <p>
     some resular text....
   </p>
</div>
<strong>Title</strong>

CSS:

p strong{
   padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

edited May 23 '17 at 10:30

Community

answered Jul 18 '16 at 03:54

PseudoAj

2 Answers2