Multiple Classes?

HTML & CSS
1

I have a Subsection Bar where I want to apply different Padding depending on if it is used on the top or bottom.


	<div class='subsectionBar'>

What is the best way to accomplish that?

Is it possible to assign multiple CSS classes?

And if so, how well supported is that cross browsers?

Sincerely,

Debbie

2

Yes, you can assign multiple classes to set specific styles in different places. Multiple classes are fully cross browser compliant and have been for a long time.

The link at the bottom of this post goes to an example that I wrote about two months ago. The example shows two identical menus, one at the top of the page, the other at the bottom. The difference between the two is the position of the gold bar… it is underneath the menu at the top of the page and above the menu at the bottom of the page. That change is accomplished by adding a second class to the <ul>.


<ul class="nav head"> ... </ul>
<ul class="nav foot"> ... </ul>

The CSS is equally simple.


.nav.head {
    border-bottom:16px solid #fc6;
    padding-bottom:3px;
}
.nav.foot {
    border-top:16px solid #fc6;
    padding-top:6px;
    margin-top:14px;
}

The complete code for the demo can be found here:

3

As @ronpat; said, it is possible.

Simply using multiple classes like <div class="class1 class2"> is supported in every browser under the sun (okay, except for the fossil ones that don’t support CSS at all)

In css using .class1.class (targetting elements that have both class1 as well as class2) is supported as of IE7, all other vendors have been supporting this for a long long time.

So in short, you can just use this without any worries :slight_smile:

Note that when you use multiple classes, the order in which are the applied is the order in which they appear in the stylesheet, not the order in which they appear in your HTML.

That is, given this CSS:


.class1 {
    color: red;
}
.class2 {
    color: blue;
}

<div class="class1 class2">test</div> is exactly the same as <div class="class2 class1">test</div>

(both will be blue, because .class2 is specified later in the CSS and thus overrides .class1)
(see http://codepen.io/anon/pen/sjoai)

whereas with the following CSS


.class1 {
    color: blue;
}
.class2 {
    color: red;
}

Both elements will be red.

(see http://codepen.io/anon/pen/JlGmj)

4

Okay, thanks.

Not understanding the link…

It just shows a landing page with links to code and one asking for a password…

Sincerely,

Debbie

5

Thanks for the reply as well! :slight_smile:

Debbie

6

Sorry. I must have posted a wrong link :confused:

Try this one:

You can delete or ignore the stuff between the header and footer menus to reduce extraneous junk. The header and footer menus contain the examples of two classes.

Let me know if this link does not work or the example is useless to you.

Thanks.

7
Off Topic:

Weird. I just tried the link that failed for you and it went to the dropbox as expected. The new link does the same. If the new link fails, too, I can post the code in a message or e-mail it to you. PM required for addy

8

This is what I am seeing…

Not sure what I’m supposed to do with those? :-/ (I was under the impression that I’d click on your link and see a working webpage…)

At any rate, between you and ScallioXTX, I got the answer I needed.

Thanks,

Debbie

9

As you know, Dropbox is commonly used for collaborative file sharing. It can also be used to set up read-only downloadable files. You were supposed to click the “Download” button and download the files to your computer and run them on your computer. From a PC, one would be offered the download as a zip file. I don’t know how they handle a D/L request from a Mac. The files are the stand-alone demo of a web page that I submitted to an OP a couple or three months ago. You asked about applying different padding and margin using a second class. By using two classes, this page applies different padding, margin and borders to the same menu code so the same menus can be used at the top and bottom of the page. Thought it might be helpful. The significant code was included in post #2 in this thread. With that in hand, downloading the pages was actually overkill.

Glad you found an answer.