linearspin linearspin - 5 months ago 7
CSS Question

applying css attributes to child elements

I can't understand the behavior of this class:

.h-box > div > h2,h3,h4 {
text-align: center;
}


for me it is like this class should applies only to headers nested in which are nested in .h-box elements.

But in fact it applies also to the h4 header nested directly in .h-box element, why is that? Whats wrong here?



.h-box {
display: flex;
margin-bottom: 2em;
align-items: center;
justify-content: space-between;
}
.h-box > div {
border: solid gray 2px;
box-shadow: 1px 1px 1px 0px lightgray;
padding: 0.5em 1em;
}
.h-box > div:first-of-type {
margin-right: 1em;
}
.h-box > * {
width: 50%;
}
.h-box > div > h2,h3,h4 {
text-align: center;
}

<div class="h-box">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</h4>
</div>

<div class="h-box">
<div>
<h3> quis nostrud exercitation </h3>
</div>

<div>
<h3> quis nostrud exercitation </h3>
</div>

</div>




Answer

It should look like this

.h-box > div > h2, .h-box > div > h3, .h-box > div > h4  {
    text-align: center;
}

Comma separated value is used instead of rewrite the rule several times for a group of selectors. Without the ability to use comma, one would had to do this

.h-box > div > h2 {
    text-align: center;
}
.h-box > div > h3 {
    text-align: center;
}
.h-box > div > h4  {
    text-align: center;
}
Comments