What is the purpose of > in a CSS file

Question

I am currently editing a CSS file from a Joomla template, and I came across this line: .promo > .gantry-width-block:hover{margin-top:-35px;padding-top:35px;}

What is the purpose of the > marker in between promo and gantry..?

Ps. I don't know if marker is the correct word, probably not.

http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean — Phoenix, Apr 14 '16 at 17:05

score 2 · Accepted Answer · answered Apr 14 '16 at 17:06

2

> is a direct child selector, .promo > .gantry addresses all elements with a class gantry that are a direct child of any element with the class promo.

answered Apr 14 '16 at 17:06

Paul

8,974
3
28
48

score 1 · Answer 2 · answered Apr 14 '16 at 17:07

1

Extracted from here

    div > p {
       background-color: yellow;
    }

Select and style every p element where the parent is a div element

answered Apr 14 '16 at 17:07

Anfuca

1,329
1
14
27

score 0 · Answer 3 · answered Apr 14 '16 at 17:06

0

This means direct descendant. This is worth a read http://www.w3schools.com/cssref/css_selectors.asp

answered Apr 14 '16 at 17:06

Rafouille

863
10
16

score 0 · Answer 4 · answered Apr 14 '16 at 17:06

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

Examples:

The following selector represents a p element that is child of body:

body > p The following example combines descendant combinators and child combinators.

div ol>li p It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the ">" combinator has been left out.

Reference https://www.w3.org/TR/selectors/#child-combinators

score 0 · Answer 5 · answered Apr 14 '16 at 17:08

0

It means direct descendant.

For example, the footer here is a direct descendant, while p is not.

<div>
    <footer>
        <p>
        </p>
    </footer>
</div>

answered Apr 14 '16 at 17:08

Robin Dorbell

1,569
1
13
26

score 0 · Answer 6 · edited Oct 02 '21 at 05:47

It means immediate children.

It refers to direct children of certain elements .

Example 1:

Parent_1

 child_1

 child_1

Parent_2

 child_2

Example 2:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

hat means the selector div > p.some_class only selects paragraphs of .some_class that sit directly inside a div, not paragraphs that are nested further within.

Check here more..

check here more.. 2

What is the purpose of > in a CSS file

6 Answers6