1

I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.

which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?

                       #shape > div{
                        }
Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
stacked ontop
  • 33
  • 2

4 Answers4

5

Actually A > B is a specialization of the more generic A B:

  • A B will apply to any element B being somewhere inside an element A.
  • A > B will only apply to elements B who are direct children of an element A.

Simple example:

CSS

.a .b {
    color: red;
}

.a > .b {
    color: blue;
}

HTML

<div class="a">
    <div class="b">Hello</div>
    <div class="c">
        <div class="b">World!</div>
    </div>
</div>

You can try this example right here at jsFiddle.

As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.

Mario
  • 35,726
  • 5
  • 62
  • 78
3

This selects any DIV that is a child of the element with the ID shape.

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
Rob
  • 11,492
  • 14
  • 59
  • 94
  • No is does not, this is incorrect. – iConnor Aug 14 '13 at 08:06
  • 1
    It is correct. Look it up here: http://www.w3.org/TR/CSS2/selector.html Quote: "E > F Matches any F element that is a child of an element E." – Rob Aug 14 '13 at 08:07
  • 1
    @Connor - If you mean that the ID is `shape` rather than `#shape`, you could have just edited the answer and fixed the typo. – Álvaro González Aug 14 '13 at 08:08
  • @ÁlvaroG.Vicario No, i mean your answer is correct, this answer is incorrect. That selector does not select and div element that is a child of #shape – iConnor Aug 14 '13 at 08:09
  • 1
    @Connor: You're mixing up **child** and **descendant**. While all children are descendants, not all descendants are children (of the same parent). – Mario Aug 14 '13 at 08:09
  • It really depends on how you define **child**. – Mario Aug 14 '13 at 08:12
  • I do apologize i thought, i class them as children, @mario is right, but your answer isn't very clear, as i class everything inside of a element as children – iConnor Aug 14 '13 at 08:13
  • @Mario - Out of curiosity... What alternative definition of child do you have in mind? – Álvaro González Aug 14 '13 at 08:14
  • 3
    No worries, you're actually right, based on interpretation. :) @ÁlvaroG.Vicario For me **children** are only those elements directly sitting inside an element. Real world analogy: Grandparents might call the children of their children children as well, but they're actually their grandchildren. – Mario Aug 14 '13 at 08:16
  • But for people that don't know what this selector is, this could be very confusing. – iConnor Aug 14 '13 at 08:20
  • This information is incorrect. I do not understand the 4 votes here. – AdityaSaxena Aug 14 '13 at 08:47
2

this applies the styles to divs which are direct children of element with id #shape

Demo: Fiddle

in the demo the style is not applied to section > div because the container div is not a direct child of #shape

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
1

> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape

Demo : http://jsfiddle.net/JDs9G/

Sirwan Afifi
  • 10,654
  • 14
  • 63
  • 110