CSS change style if nested element

Question

Is there a way in CSS to adjust the style of a parent element, if a nested element exists?

For example, let's say we have a button with padding on the right and left of 10px.

<button>Submit</button>

Now, let's say we add an icon to this:

<button><i class="icon"></i> Submit</button>

Due to the icon, the spacing on the left of the button is too wide. Is there a way without adding an additional class to the button, to say if it contains <i>, make the padding less on the left?

Thanks!

CSS does not have a "parent" selector so you'll have to do something else — Explosion Pills, Apr 12 '13 at 19:39
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Richard JP Le Guen, Apr 12 '13 at 19:40
as other have said, not yet. You could use negative margin on the `` however which would replicate this, particular, effect — Stuart Burrows, Apr 12 '13 at 19:40
[This answer](http://stackoverflow.com/a/45530/248129) goes into detail about why there are no parent selectors. — Richard JP Le Guen, Apr 12 '13 at 19:43

score 0 · Accepted Answer · answered Apr 12 '13 at 19:38

0

Alas, You cannot do this at the moment. It is proposed for css4.

answered Apr 12 '13 at 19:38

Nick Tomlin

28,402
11
61
90

score 0 · Answer 2 · answered Apr 12 '13 at 19:45

Sounds to me like you should just use a different element to target. This is where elements which are void of semantic meaning like <span> come in handy:

<button><span class="text">Submit</span></button>
<button><i class="icon"></i> <span class="text">Submit</span></button>

If you use that HTML, you could just target .text with the margin/padding instead.

CSS change style if nested element

2 Answers2