Css Multiple Selectors

[grafikerinbiri]

Hi,

I write for this article: https://css-tricks.com/multiple-class-id-selectors/

In this article;

1:
https://codepen.io/grafikerinbiri/pen/jpwXKm

2:
https://codepen.io/grafikerinbiri/pen/RBgEYw

Here’s the question:
On the 2. form do we need the “callout” class after the id of “header”?
We already have a div class named callout inside the header div. Why had putten that callout class near the header?

[Paulie_D]

I’m not clear what it is you are asking.

#header.callout is not the same as #header .callout (note the space). The second selects any element with a class of .callout which is a descendant of the #header element.

Certainly one can argue that #header.callout is redundant on that page but not if there are multiple pages on the site each with a #header but with different classes.

[grafikerinbiri]

In the second code we have a (div id=”header” class=”callout”)(div)
And inside that div we also have a (div class=”callout”)(div)

Do we need the two of the callout classes:
(div id=”header” class=”callout”)
(div class=”callout”)(div)
(div)

I didn’t understand that is the first class necessary?

[Paulie_D]

They’re two different things and so are selected differently.

It depends on what the callout class is doing as to how they affect the div they are attached to.

I’d suggest you do some more research on CSS selectors.

[grafikerinbiri]

thank you

[Author]

Posts