Skip to main content
V
VShaneCurtis
Inspiring
June 14, 2022
Question

One element with multiple classes assigned to it?

  • June 14, 2022
  • 2 replies
  • 683 views

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 has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 14, 2022

    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
    O
    osgood_
    Legend
    June 14, 2022
    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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 14, 2022

    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
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 14, 2022

      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
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices