Gilbert Gilbert - 2 months ago 7
CSS Question

Style both parent and child element in css

I have the following structure...

<a href="#" class="brand-logo">
<img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo"/>
</a>


And I have the following css code...

.brand-logo {
height: 100%;
}
.wpc-logo {
height: 100%;
}


My question: It is a way I can style both in one css code?

Answer

If you want separate class names with the same styles, use a comma , between CSS selectors.

.brand-logo,
.wpc-logo {
  height: 100%;
}

Or you can create a common class to apply to both elements.

.common {
  height: 100%;
}
<a href="#" class="brand-logo common">
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo common"/>
</a>
Comments