css styling of unordered list containing 5 ul's with same classnames, apply different styles to each
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
ul:nth-of-type(3) {
border: 1px solid black;
}
There will be times when, rather than selecting a child, you instead need to select according to the type of element.
Imagine mark-up that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo clas开发者_JAVA百科s. In the snippet above, only the third ul will have a border around it.
I have the above didn't work
dropmenu
<li class="submenu">
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
<ul.level2>
<li>something</li>
<li>something2</li>
</ul>
The list above is dynamicly generated by a php script and I can't change the class names therefore when I apply styles to the ul element ,it is the same for all. Thanks for all help
Which browser are you testing this in because the pseudo-class :nth-of-type(n)
is not supported across all browsers. For example, it is not supported in Internet Explorer.
is it possible to remove the .level2
from the ul tags and replace with <ul class="level2">
? Then your css should work.
精彩评论