CSS / CSS3 Hierarchy [duplicate]

Question

I have two different tags with different hierarchy but the same settings, is there any way in that case not to double my code? I tried mixing up the declarations but looks like only one of them will actually enjoy the traits..

section#leftSection nav#leftNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

Felix · Accepted Answer · 2014-03-28 16:29:41Z

4

You can use comma , to separates multiple selectors that have the same styles:

section#leftSection nav#leftNav ul li a, header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

answered Mar 28, 2014 at 16:29

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shmnsw Over a year ago

wow your fast.. great, my mistake was that:

shmnsw Over a year ago

section#leftSection,header#layout2_header nav#headerNav,nav#leftNav ul li a

gaynorvader Over a year ago

You could also give your ul tags a class and just have ul.classname li a as the selector. This is a good solution anyway +1

shmnsw Over a year ago

Interesting, it gets very complex and yet so comportable.

user2968831 · Accepted Answer · 2014-03-28 16:31:19Z

1

Separate the selectors with a comma , open the curly brackets add your code and hey presto...

section#leftSection nav#leftNav ul li a, 
header#layout2_header nav#headerNav ul li a{
    background-color: #336b98;
    color: #EBEBEB;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
}

It's good to keep each selector on it's own line to make your code more readable.

answered Mar 28, 2014 at 16:31

user2968831

Collectives™ on Stack Overflow

CSS / CSS3 Hierarchy [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related