0

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.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
SamJolly
  • 6,347
  • 13
  • 59
  • 125
  • 2
    Put a class on the `

    `, select by class, and move on

     – Matt Ball Dec 03 '13 at 00:24
  • 1
    You cannot select in css based on the child elements, you will need to use JavaScript/jQuery. – DrCord Dec 03 '13 at 00:24
  • 1
    If you wanted to do this with jQuery.. `$('p:has(button[value="Save"])').css("background","red");` [jsFiddle example](http://jsfiddle.net/JoshC/wp95R/) – Josh Crozier Dec 03 '13 at 00: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 Dec 03 '13 at 00:31

1 Answers1

2

jQuery answer: 

$('p:has(button[value="Save"])').addClass('containsButtons');
DrCord
  • 3,917
  • 3
  • 34
  • 47
  • I actually went with the Class suggestion in the end as I wanted to keep it in CSS, but thank you anyway. – SamJolly Dec 03 '13 at 01:39