How to select and apply styles for html element which has no defined child?

Question

How to select and apply styles for html element which has no defined child element? For example:

<p>Lorem</p>
<p>Isum <span>dolor</span></p>

I want to apply some styles for the first p because it doesn't contain span element.

Is it possible to do by CSS?

You can only travel down the DOM so you can't select the parent - you can't do it with css. You will need javascript. — easwee, Jun 12 '12 at 14:40
Nope, not possible. And by "defined child" you probably mean "child element". — BoltClock, Jun 12 '12 at 14:46
Note that this has been [proposed in the CSS selectors level 4 spec](http://dev.w3.org/csswg/selectors4/#subject). — James Allardice, Jun 12 '12 at 14:52

score 1 · Answer 1 · answered Jun 12 '12 at 14:45

1

You would have to put a selector on that first p to do this in CSS only:

You can use the jQuery route to do the same thing.

answered Jun 12 '12 at 14:45

Lowkase

It's possible to have many p and I do not know which one has a child. – Eugene Kuzmin Jun 12 '12 at 14:51
If you don't know which p will have the span child then you will have to go with a javascript/jQuery solution. Currently there is no way to move up the DOM with CSS, you can use jQuery to get around that limitation. – Lowkase Jun 12 '12 at 15:11

score 0 · Answer 2 · answered Jun 12 '12 at 14:43

Why don't you give that <p> a class or something like that? If you want it to be dynamic add a class to using javascript. You can setup conditions better with that. CSS is not your answer in this case. This can be helpful in some ways :) http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

score 0 · Answer 3 · answered Jun 12 '12 at 14:44

0

I don't think you can do it with css. You can do it with jQuery...

answered Jun 12 '12 at 14:44

Shahbaz Singh

score 0 · Answer 4 · answered Jun 12 '12 at 14:45

0

You don't need to select the parent, I think..

<p class="Lorem">Lorem</p>
<p>Isum <span>dolor</span></p>


.Lorem + p {color: green;}

answered Jun 12 '12 at 14:45

Robin Maben

If you're still curious about the parent selector. Read this answer - http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Robin Maben Jun 12 '12 at 14:47

score 0 · Answer 5 · answered Jun 12 '12 at 14:59

0

Your first p element actually has a child: It's a text node. Otherwise, :empty could be used.

When you know the exact position of the element, :nth-child can be used. There is no need for a class (but it would be faster).

answered Jun 12 '12 at 14:59

fb55

By "child" I meant any child html element. Sorry. – Eugene Kuzmin Jun 12 '12 at 15:06

5 Answers5