Decendant selector usage

Question

I couldn't understand the decendant selector usage on this subject.

.fc > * {
    margin: 10px;
    padding: 20px;
    background-color: lightgray;
    border-radius: 10px;
}

So what does .fc > * means? Because I really cannot "fully" understand this.

HTML part

<body>
<div class="fc">
    <header>Swanns Way - Overture</header>
    <aside>For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say &quot;I'm going to sleep.&quot;</aside>
    <main>And half an hour later the thought that it was time to go to sleep would awaken me; I would try to put away the book which, I imagined, was still in my hands, and to blow out the light; I had been thinking all the time, while I was asleep, of what I had just been reading, but my thoughts had run into a channel of their own, until I myself seemed actually to have become the subject of my book: a church, a quartet, the rivalry between François I and Charles V. </main>
    <section>This impression would persist for some moments after I was awake; it did not disturb my mind, but it lay like scales upon my eyes and prevented them from registering the fact that the candle was no longer burning. </section>
    <footer>by Marcel Proust</footer>
</div>

`.fc > *` selects ALL elements whose parent has the class `.fc` — I haz kode, Aug 06 '17 at 14:23
`*` is a universal selector `>` is to select the direct child of `.fc`. So, it will select all kind of direct children of the parent which has a class `.fc` — Sankar, Aug 06 '17 at 14:25
Possible duplicate [css-child-vs-descendant-selectors](https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors) — Asons, Aug 06 '17 at 21:15

score 0 · Answer 1 · answered Aug 06 '17 at 21:07

In modern CSS, there is no such thing as a descendant selector. That term was used in CSS 2 but was replaced with descendant combinator.

A descendant combinator is represented by a space character between two selectors.

You don't have one in your example. You have a greater than symbol, that is a child combinator.

Given:

<a>
    <b> 
         <c>
         </c>
    </b>
</a>

b is the child of a and c is the child of b.
b and c are both descendants of a
c is the grandchild (not a child) of a

.fc is a class selector. * is the universal selector (which matches everything)

So the selector is every element that is a child of an element that is a member of the fc class.

Decendant selector usage

1 Answers1