开发者

css styling of unordered list containing 5 ul's with same classnames, apply different styles to each

开发者 https://www.devze.com 2023-03-24 14:31 出处:网络
X:nth-of-type(n) ul:nth-of-type(3) { border: 1px solid black; } ul:nth-of-type(3) { border: 1px solid black;
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.

0

精彩评论

暂无评论...
验证码 换一张
取 消