How to exclude styles for a some specific elements using css? - html

Question

<div id="header" class="top-bar">
...
</div>
<div id="specificdiv" class="top-bar">
<ul>
<li>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
</div>
<div id="footer" class="top-bar">
...
</div>
I need to exclude style for specific <li> tags under div id="specificdiv".
I could exclude first element using this
.top-bar li:not(:first-of-type) {
float: none;
}
but how to remove rest 2 as well?

Answer 1

Use the direct descendant selector >. It only selects the immediate descendants of the targeted parents.
You could use #specificdiv ul > li and it will only select li on the first level of children.
And as BoltClock pointed out, you should wrap the li whose parent is a li inside of a ul.
<div id="specificdiv" class="top-bar">
<ul>
<li>
<ul>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
</ul>
<li>
</ul>
</div>

Answer 2

Why don't you just add class for the <li>, that you want to style?
Example:
<ul>
<li class="someClass">
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
And then your style:
.someClass{
float:none;
}

Answer 3

#specificdiv li:not(:first-of-type)
{
float: none;
}
it will work.
# is used to select element by id. example #my will select element which has id=my

Answer 4

for that you need nth-child(an+b) you can use it like this
li:nth-child(2){
..
}
li:nth-child(3){
..
}
now you hve a lot of alternative
ul li:nth-child(3n+3) {
color: #ccc;
}
li:nth-child(4n-7) { /* or 4n+1 */
color: green;
}
and if you want to check special lis use the > like this
div#pecificdiv ul.myList >li:nth-child(odd) {
color: green;
}
check this link for useful nth-child recipes
http://css-tricks.com/useful-nth-child-recipies/
and this
http://css-tricks.com/how-nth-child-works/