1

Say I have an HTML like:

<p>
  <label>Label</label>
  <input type="file" />
  <div>test div</div>
</p>

I want to select the label, input and div who are the child of the p tag, how can I select them all in one time? I don't want to be more specific because they might change.

Thanks,

Harry
  • 87,580
  • 25
  • 202
  • 214
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
  • 7
    `p > *` should select all immediate children, and `p *` should select all decendents. – danludwig Jan 24 '15 at 04:57
  • 1
    I don't think it's semantically correct to have form elements in a p tag... – Rafael Jan 24 '15 at 05:01
  • @Rafael any doc/reference for this? thanks for pointing out! – AGamePlayer Jan 24 '15 at 05:02
  • There might be documentation stating this but let's take a logical approach. A p tag, for paragraphs has form elements inside it? – Rafael Jan 24 '15 at 05:16
  • 1
    @Rafael: There's absolutely nothing wrong with putting input elements in p elements. You'll find *tons* of examples in the [spec](http://www.w3.org/TR/html5/forms.html). As for "logical", the HTML spec actually recommends [not worrying about it](http://stackoverflow.com/questions/20156262/list-or-longer-code-snippet-inside-paragraph/20158687#20158687). – BoltClock Jan 24 '15 at 05:23
  • @BoltClock hmm very interesting. Thanks for the articles. I won't be doing it in my code although it is permitted. – Rafael Jan 24 '15 at 05:42

2 Answers2

2

for do this you need add a class to <p> beacuase see below pic: enter image description here

I do this by below css :

p.para *,p.para + div{
    background: #ff0000;
}
<p class="para" >
  <label>Label</label>
  <input type="file" />
  <div>test div</div>
</p>
<div>ddd</div>
osman Rahimi
  • 1,427
  • 1
  • 11
  • 26
  • Your code is a mess. There are stray `}`s all over the place, the whitespace is horribly inconsistent, and I'm not sure why there is a `p +div` selector. – BoltClock Jan 24 '15 at 05:26
2

If this is for a specific page the p * would just do fine.

However, if you have this rule in your main css file which is imported in all html files then p * would be a problem since it will update all nested elements in a <p> tag.

So its better to use individual rules in css file

Polynomial Proton
  • 5,020
  • 20
  • 37