CODEWITHSUNDEEP
htmlcss
bsky
bsky

Reputation: 20222

How to use two classes on one element

I have the following two CSS components:

#enableScrolling {
    overflow-y: scroll;
    height: 100vh;
}

#grey {
    background-color: #F0F0F0 !important;
}

I would like to use them together in an HTML tag.

I would like to do something like this:

#greyScrolling {
    .enableScrolling
    .grey
}

Otherwise, I would like to bring them together in a tag directly, like this:

<div id='enablescrolling' ???='grey>

How can I combine these two components?

Upvotes: 1

Views: 1451

Answers (3)

Chris
Chris

Reputation: 1111

Make them both classes instead;

.enableScrolling {
     overflow-y:scroll
     height: 100vh;
}

.grey {
    background-color: #F0F0F0 !important;
}

Then just call 

<div class="enableScrolling grey> Content ... </div>

This works because an element can have many classes simultaneously. You current have your styling set as ID and according to the "rules" an element can have only 1 ID and that ID can only be used once per page.

Upvotes: 1

jonsuh
jonsuh

Reputation: 2875

Use a class names instead of IDs and combine the CSS declarations in one class:

HTML:

<div class="class-name">

CSS:

.class-name {
    overflow-y: scroll;
    height: 100vh;
    background-color: #F0F0F0 !important;
}

Upvotes: 2

Florin Pop
Florin Pop

Reputation: 5135

You can use classes instead of id's:

.enableScrolling {
    overflow-y: scroll;
    height: 100vh;
}

.grey {
    background-color: #F0F0F0 !important;
}

And then add them both to the div:

<div class="enableScrolling grey"></div>

Upvotes: 2

Related Questions