css for parent without class/id

Question

i have :

<form id="commentform">
    <p class="class1">
    <p class="class2">
    <p>
        <input id="captcha_code"></input>
    </p>
</form>

i want to style the "p" which does not have nor id neither class, i want to do it in a way that it does not style the other "p" tags. my "p" has a child with id (#captcha_code). i guess, if i can style #captcha_code parent, it will not concern the others... but i do not know how to do it...

possible duplicate of [CSS selector - element with this child](http://stackoverflow.com/questions/4220327/css-selector-element-with-this-child) — Mauro, Nov 21 '13 at 14:55

score 4 · Answer 1 · edited May 23 '17 at 12:28

4

There is not currently a way to style an element based on whether or not it contains a particular child. The best way I can think to style the <p> in your case would be:

#commentform p:not([class]){

}

Closing your paragraphs isn't completely necessary, but it's always nicer to read. Additionally, you shouldn't add a closing tag for your input in HTML:

<form id="commentform">
    <p class="class1"></p>
    <p class="class2"></p>
    <p>
        <input id="captcha_code">
    </p>
</form>

JSFiddle

edited May 23 '17 at 12:28

Community

1
1

answered Nov 21 '13 at 14:58

George

36,413
9
66
103

Actually, closing the p elements does not always need to be done in HTML5 and in HTML4.01 it was optional, though I always feel safer in doing it. – Rob Nov 21 '13 at 15:08
Reference: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#optional-tags – Rob Nov 21 '13 at 15:14
Strangely enough, what you *aren't* allowed to do in HTML is have a closing `` tag. – BoltClock Nov 21 '13 at 15:19
Thanks @BoltClock The ironic thing is, the answer I have shared in the question was written by you and I didn't even realise. – George Nov 21 '13 at 15:25
@oGeez: Ha. I forgot I even wrote that answer. – BoltClock Nov 21 '13 at 15:26
Hello, thanks a lot, it worked !!! Just to know, i closed inout tag for a nicer effect and make it more understandable, i my html, there is no closing tag. – Igor Laszlo Nov 21 '13 at 16:14

Afzaal Ahmad Zeeshan · Answer 2 · 2013-11-21T15:01:17.433

0

Try this:

p > input {
  // style for that..
}

Using this, the style will be applied to the parent of the input.

Fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/WyV7A/

edited Nov 21 '13 at 15:01

answered Nov 21 '13 at 14:55

Afzaal Ahmad Zeeshan

15,669
12
55
103

that will style all the p tags, the OP asked to only style the parent of input with the id captcha_code – Mauro Nov 21 '13 at 14:56
I am sorry, I missed the parent part! @Mauro, check this now :) – Afzaal Ahmad Zeeshan Nov 21 '13 at 15:01
The selector exists, and it means all `input`s that are direct children of a `p` tag. – sitifensys Nov 21 '13 at 15:06
My mistake when i say that it doesn't exist i want to say that the parent is not selected here ... "will be applied to the parent of the input" it's wrong – DaniP Nov 21 '13 at 15:13
"the style will be applied to the parent of the `input`." No. – BoltClock Nov 21 '13 at 15:24
Thanks Afzaal but your suggestion does not work... look at oGeez' solution, it works very well ! – Igor Laszlo Nov 21 '13 at 16:19

score 0 · Answer 3 · answered Nov 21 '13 at 15:00

0

To keep it simple, this can't be done.

Unlike the child selector >, There is no (and will probably never be) a parent < selector in css.

Have a look at this article to see why.

answered Nov 21 '13 at 15:00

sitifensys

2,024
16
29

You're wrong. Have a look at the fiddle in my answer! :) You'll see that there is a sign for that.. – Afzaal Ahmad Zeeshan Nov 21 '13 at 15:02
@AfzaalAhmadZeeshan Nop sorry, you are using a child selector, not a parent selector :) – sitifensys Nov 21 '13 at 15:04

css for parent without class/id

3 Answers3