Mixing two css for different nav definitions

Question

I have 2 css and both of them have specifications for nav

What would be the best way to use both of them?

The issue here is the second definition of nav has also a li definition that involves an id like

<li id="all">All</li>

This id I am using on a js.

I have this fiddle

ShaggyInjun · Accepted Answer · 2013-01-05T01:59:05.680

2

Just use the :not operator in CSS and exclude the first nav from second nav css definition.

Add a class to firstNav, and then inside the css use :not like so

nav ul:not(.first)

Edit

Check the fiddle again. Seems like there is another trick to do this, something called a substring matching . Note that the order of the css in the fiddle is important. if you flip the definitions of the navs, the css will not work. I haven't tested this in IE 8, but based on what I read, it should work in IE8 as well.

Fiddle

edited Jan 05 '13 at 01:59

answered Jan 05 '13 at 01:33

ShaggyInjun

2,880
2
31
52

Does the crappy IE supports the operator? – edgarmtze Jan 05 '13 at 01:35
Seems like it does. http://stackoverflow.com/questions/4464234/is-there-any-way-to-get-the-css-not-selector-working-in-ie-and-chrome http://www.w3schools.com/cssref/sel_not.asp – ShaggyInjun Jan 05 '13 at 01:40
SO IE8 and less do not support them – edgarmtze Jan 05 '13 at 01:46

Mixing two css for different nav definitions

1 Answers1