CSS notation: the meaning of ">"

Question

In my website, I have the following structure on some html page:

<html>
     <head><!-- All the usual information here, including the link to the css file --></head>
     <body>
           <div id="splash">
                 <!-- The good stuff -->
           </div><!--End of Splash-->
     </body>
</html>

Now that #splash div only appears on that one html page, and I need the css affecting that page's html {} to be a little different. Is the below notation going to do what I need?

html>body#splash {/* CSS that only affects the html that contains div #splash */}

possible duplicate of [Is there a css selector for selecting an element futherup in the html?](http://stackoverflow.com/questions/16280632/is-there-a-css-selector-for-selecting-an-element-futherup-in-the-html) — Quentin, Aug 26 '13 at 22:25

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

I think you're looking for a parent selector; sadly this doesn't exist in CSS, so you're out of luck.

This is, from what I understand, mostly for performance reasons -- Jonathan Snook's article goes into a little more detail.

It's either time to change your page generation so that a class or ID gets added to the html element on your "splash" page, or resort to JavaScript, such as the jQuery cssParentSelector library that arkanciscan mentions.

edited May 23 '17 at 11:45

Community

1
1

answered Aug 26 '13 at 22:23

Matt Gibson

37,886
9
99
128

Thank you, indeed you are right the word I was looking for was 'parent' - I had not used child selectors before and I thought they meant something else. – gersande Aug 26 '13 at 22:29

score 2 · Answer 2 · answered Aug 26 '13 at 22:22

2

Since IDs are unique, you can just do:

#splash {
    /* stuff */
}

About your question:

html>body#splash

Will not work; try

html>body #splash

The > is basically the same this as a space, but selects only direct children.

(I'm assuming you're trying to select #splash; that's how I read your question. If you want to select body if #splash exists, then... well, you can't.)

answered Aug 26 '13 at 22:22

tckmn

57,719
27
114
156

This would select `#splash`, not `html`. – Joey Aug 26 '13 at 22:24
@Joey That's what the OP's trying to do, if I'm not mistaken – tckmn Aug 26 '13 at 22:25
@Doorknob — It isn't. Reread the paragraph of text between the two code examples in the question. – Quentin Aug 26 '13 at 22:28
@Quentin Ah, okay then. Well then it's impossible, until CSS4 is adopted (in a long time, and then we'll still have to worry about supporting old IEs) – tckmn Aug 26 '13 at 22:32

score 2 · Answer 3 · answered Aug 26 '13 at 22:34

Like others have said, you can't do this is CSS... yet! In the next version of CSS you'll be able to add an exclamation point to any part of a compound selector to indicate which element of the selector your rules should apply to. This will be called a "subject" (http://www.w3.org/TR/selectors4/#subject)

If you want to use this today you can try this polyfill https://github.com/Idered/cssParentSelector

score 1 · Answer 4 · answered Aug 26 '13 at 22:22

Child selectors are indicated by >: http://www.w3.org/TR/CSS2/selector.html#child-selectors

It means you are selecting a first-level descendent.

Your code needs this space:

  html>body #splash

This reads: "Select the element with the id of splash that is a descendent of body which is a child of html."

Your code is this:

 html>body#splash

Your current code reads: "Select the body element with the id of splash that is a child of html.

score 1 · Answer 5 · answered Aug 26 '13 at 22:38

As has been said, this can't be done in current CSS.

But just to give you a suggestion: you could add a unique ID or a class to the HTML in question; if you know which one it is ahead of time, just add it statically; if not, you'll have to actually look (with JS) if there's a div like you describe in the body, you can't do it with CSS alone.

CSS notation: the meaning of ">"

5 Answers5