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 {
}
Asked
Active
Viewed 1,893 times
2
TylerH
- 20,799
- 66
- 75
- 101
Bill Wentworth
- 31
- 5
3 Answers
3
No. You should combine individual class names using .:
.twelve-col.col.main-menu
Praveen Kumar Purushothaman
- 164,888
- 24
- 203
- 252
-
Ah, i see. Now does it matter in the css if it says – 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
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)
Vladimir Gerasimenko
- 377
- 2
- 8
0
The most effective selector will be nav.twelve-col.col.main-menu you can also use nav.main-menu which makes some sense.
Robert Williams
- 1,370
- 1
- 17
- 38