One element with multiple classes assigned to it?

Explorer ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

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.

Views

88

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

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.

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

What's wrong with using this?

 

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

 

<aside>

Left sidebar

</aside>

 

<main>

Main content

</main>

 

<aside>

Right Sidebar

</aside>

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

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}

 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

In my case the answer is yes.  It would be used on both sidebars so a class makes sense to me.  I don't know if I've ever seen it coded before which was the reason for my question not to start an all out debate again.  Is the proper notation class="class1 class2"?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

If only used on sidebars, it would be more productive to style the tags.

 

Classes are for things you may use 10-20 times.  Think "economy of code."  Otherwise you'll hate yourself later for overcomplicating the  code.

 

Yes, that's correct syntax.

<div class="class1 class2 class3 class4...">  </div>

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

Thank you for the clarification.  I appreciate the help.  I realize that I will have some "house cleaning" to do.  Right now I'm just testing things out.  I'll look for ways to consolidate things if it works.  Sometimes you have to make a little mess to figure stuff out.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

LATEST
quote

I don't know if I've ever seen it coded before 


By @VShaneCurtis

 

Seriously? I guarantee that more websites are built this way than not, just take a look at their source code. These websites are generally using some kind of hideous css framework.

 

My take on this is you should try to limit the number of classes you add to your html which will produce considerably less html code bloat and be easier to manage.

 

Influencers, from those large social media companies are making the process of web development more complex and harder than it really is for those that have no real reason or requirement to resort to using such workflows.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines