Reputation: 153

:hover with ">" in CSS

It's a silly question, but well. What version is the ">" in CSS? I can't find it in google because I don't know the name of this.

Example.

CSS

.test {
    width:200px;
    height:200px;}

.test .color {
    width:50px;
    height:50px;
    float:left;
    background:red;}


.test:hover > .color {
    background:blue;}

HTML

<div class="test">
    <div class="color"></div>
</div>

What version of CSS it is? 2 or 3? thanks

Upvotes: 1

Answers (4)

Sean Keating

Reputation: 1728

That would be a CSS selector for that is directly below (in the document tree) another element. As in it's child element.

This CSS3 cheat sheet is very helpful: CSS3 Cheat Sheet, not only for answering the question you have but other uncommon selector types.

You can also find what is supported on what browswers with this: Can I use... Support tables for HTML5, CSS3...

Upvotes: 0

Sirko

Reputation: 74106

It marks the immediate child of a node. Hence its name "child selector".

So in your case .test:hover > .color selects any node with the class color that is an direct child of a hovered node with class test.

For more information have a look at the respective MDN page.

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.

Upvotes: 2