How can I select an element with multiple classes in CSS?

Question

What would be the proper CSS selector to target the following tag:

<nav class="twelve-col col main-menu">

Would the proper selector just be:

.twelve-col col main-menu {
}

score 3 · Accepted Answer · answered Jul 16 '17 at 15:49

3

No. You should combine individual class names using .:

.twelve-col.col.main-menu

answered Jul 16 '17 at 15:49

Praveen Kumar Purushothaman

164,888
24
203
252

Ah, i see. Now does it matter in the css if it says
or
– Bill Wentworth Jul 16 '17 at 15:51
If it says what? `:)` I mean, what do you mean? Both are same no? – Praveen Kumar Purushothaman Jul 16 '17 at 15:51
Sorry, refresh the page - I was editing - sorry – Bill Wentworth Jul 16 '17 at 15:52
ok so it wouldnt be .nav.twelve-col.col.main-menu { – Bill Wentworth Jul 16 '17 at 15:52
@BillWentworth It's not `.nav.` but it's just `nav.` for Tag Selectors. `.` is used for classes and `#` is used for ids. – Praveen Kumar Purushothaman Jul 16 '17 at 15:53
@BillWentworth In your case, you can also use `nav.twelve-col.col.main-menu` – Praveen Kumar Purushothaman Jul 16 '17 at 15:54
Oh, ok. so
would be header.container{}
– Bill Wentworth Jul 16 '17 at 15:59
`.container` or `header.container` – Praveen Kumar Purushothaman Jul 16 '17 at 16:00
But if there was a another container class in my site I would also be targeting that as well with just .container{} but header.container{} would exclusively target that one, correct? I will leave you positive feedback :) – Bill Wentworth Jul 16 '17 at 16:04

Vladimir Gerasimenko · Answer 2 · 2017-07-16T16:01:59.853

0

No. Your selector is trying to find main-menu INSIDE col which is INSIDE twelve-col. But you are looking for element, that has twelve-col col main-menu classes the same time, so use .twelve-col.col.main-menu

However try BEM methodology, where you use just one class to make all your selectors same specificity (http://getbem.com)

edited Jul 16 '17 at 16:01

answered Jul 16 '17 at 15:54

Vladimir Gerasimenko

377
2
8

score 0 · Answer 3 · answered Jul 16 '17 at 15:58

0

The most effective selector will be nav.twelve-col.col.main-menu you can also use nav.main-menu which makes some sense.

answered Jul 16 '17 at 15:58

Robert Williams

1,370
1
17
38

How can I select an element with multiple classes in CSS?

3 Answers3