Inspiring

Question

One element with multiple classes assigned to it?

8 replies
713 views
Translate

Hi Guys.

Quick question is it possible for a page element to have multiple classes assigned to it? My page has a left and right sidebar. Both currently have a class assigned to them called bodyStyle. It handles the border and color aspects of the body area of the page. I want to create a class that is specific for both sidebars that adds additional things that would be used by both sidebars but not the main content area.. I could use the IDs but that would create repetition. A class is the better cloice but I am unsure about having multiple classes.

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

What's wrong with using this?

aside {border: 1px solid; background:silver;}

<aside>

Left sidebar

</aside>

<main>

Main content

</main>

<aside>

Right Sidebar

</aside>

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

What's wrong with using this?

aside {border: 1px solid; background:silver;}

<aside>
Left sidebar
</aside>

<main>
Main content
</main>

<aside>
Right Sidebar
</aside>

By @Nancy OShea

Apparently thats not the correct use of the 'aside' element, its open to debate.........hummm. I'm not going there, everyone seems to have their own ideas.

Translate

Nancy OShea

Community Expert

My point being, style the tag; not more classes.

Unless one intends to use the same classes elswhere, there's little need for them.

I use classes for things like text styles.

.center {text-align:center}

.right {text-align:right}

Translate

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Yes. Elements can and often do have multiple classes. Bootstrap is a good example or where many classes are combined to create desired styles.

But owing to cascade importance, HTML tags take first priority, IDs second, classes third.

Translate

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.