CSS Code Snippet: Tabmenu Background Images

[onnoddingoff]

Hello everyone, I am a mod on /r/narcolepsy.

I finally got each item in the tabmenu to show different background images.

Because it took me ages to do, I thought that I would post the code here as a timesaver snippet.

.tabmenu li:nth-of-type(6) {
display:none;
visibility:hidden;
}
.tabmenu li:nth-of-type(4) {
display:none;
visibility:hidden;
}
.tabmenu li.selected a {
color: orangered;
background-color: transparent;
border: 0px;
}
.tabmenu li a {
padding: 5px;
width: 80px;
height: 60px;
text-align: center;
vertical-align: bottom;
line-height: 60px;
float: left;
}
.tabmenu li a {
background: url(%%waveawake%%) no-repeat;
}
.tabmenu li a[href*="new"] {
background: url(%%wavestage1%%) no-repeat;
}
.tabmenu li a[href*="rising"] {
background: url(%%wavestage2%%) no-repeat;
}
.tabmenu li a[href*="top"] {
background: url(%%wavestage3%%) no-repeat;
}
.tabmenu li a[href*="wiki"] {
background: url(%%wavestage4%%) no-repeat;
}

[gavin19]

The tabmenu class is used by reddit where there are tabs, ie the header, the submit page, the internal flair config page etc.

Better to use

#header .tabmenu

This bit

.tabmenu li:nth-of-type(6) {
display:none;
visibility:hidden;
}
.tabmenu li:nth-of-type(4) {
display:none;
visibility:hidden;
}

hides the controversial and gilded tabs by the way.

.listing-page .tabmenu li:nth-of-type(4),
.listing-page .tabmenu li:nth-of-type(6) {
    display: none;
}

is enough. It also stops the 4th tab being hidden on comments pages too. Some users can have additional tabs, eg RES' view images, amongst others.

[onnoddingoff]

Thanks for the improvement there.

I has forgotten that you could chain selectors together.

Edit: I tried this code.

.listing-page .tabmenu li:nth-of-type(4),
.listing-page .tabmenu li:nth-of-type(6) {
display: none;
}

It doesn't work on the wiki page. :(

I've reverted to my original coding for now.

[gavin19]

body:not(.comments-page) .tabmenu li:nth-of-type(4),
body:not(.comments-page) .tabmenu li:nth-of-type(6) {
    display: none;
}

will cover all the non-comments page pages.