Need to add some CSS to a <p> that contains "Save" buttons, What would the selector look like? [duplicate]

Question

I have some html:

<p>
        <button type="submit" name="btn" value="Save">Save</button>
        <button type="submit" name="btn" value="Cancel">Cancel</button>
</p>

I would like to create a CSS selector that matches all "p" tags that contain the above button(s) so that I can add a :

padding-top:20px;

to it.

It would also be interesting to see if one can add this style to another parent like "div".

I guess one would just do something like:

p button, div button {}

The above applies the style to the button tag whereas I wish to add it to the "div" or "p" tag.

Thoughts??

Many thanks in advance.

You cannot select in css based on the child elements, you will need to use JavaScript/jQuery. — DrCord
– DrCord, Commented Dec 3, 2013 at 0:24
If you wanted to do this with jQuery.. $('p:has(button[value="Save"])').css("background","red"); jsFiddle example — Josh Crozier
– Josh Crozier, Commented Dec 3, 2013 at 0:30
Thank you for all of your comments. Very helpful. Did not know it could not be done as standard, but there is a workaround in JQuery. — SamJolly
– SamJolly, Commented Dec 3, 2013 at 0:31

DrCord · Accepted Answer · 2013-12-03 00:35:48Z

2

jQuery answer:

$('p:has(button[value="Save"])').addClass('containsButtons');

answered Dec 3, 2013 at 0:35

DrCord

3,9203 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I actually went with the Class suggestion in the end as I wanted to keep it in CSS, but thank you anyway.