Firefox 14 Tabs styling

[RWerner]

I am wondering if it is possible to style tabs in the tabsbar differently based on the active tab, either with css or javascript.
Currently I am styling firefox using the Stylish extension with the aid of the DOMInspector.

SO, let's say I have 5 tabs open in the bar and the middle is selected:
<1> <2> <SELECTED> <4> <5>

What I would LIKE to be able to do is, style the tabs to the left of [selected="true"] one way, and to the right another way:
<blue> <blue> <SELECTED> <red> <red>

[mcdavis]

If you want to stick with a Stylish solution you can do this:

- style all tabs blue
- style the SELECTED tab however you want that
- use this CSS selector to style all tabs to the right in red

.tabbrowser-tab[selected] ~ .tabbrowser-tab {
/* style in red */
}

That ~ is the CSS sibling selector.

[RWerner]

You just blew my mind mcdavis: I had NO idea "~" was a sibling selector. Going to fart around with this now. Thank you.

[RWerner]

Crap, doesn't seem to be working for me.
Styled all the tab-contents:
.tab-content {-moz-border-image: url(data:image/png;base64,yadayada)}
.tab-content:-moz-window-inactive {-moz-border-image: url(data:image/png;base64,yadayada)}

then styled the selected:
.tab-content[selected="true"] {-moz-border-image: url(data:image/png;base64,yadayada)}
.tab-content[selected="true"]:-moz-window-inactive {-moz-border-image: url(data:image/png;base64,yadayada)}

so far so good, but then :
.tab-content[selected="true"]~.tab-content {-moz-border-image: url(data:image/png;base64,yadayada)}
.tab-content[selected="true"]~.tab-content:-moz-window-inactive {-moz-border-image: url(data:image/png;base64,yadayada)}

doesn't work: ideas?

[mcdavis]

Yeah, for the sibling selector to work, the elements you're trying to test have to have the same parent element. .tabbrowser-tab elements are siblings because they have the same parent, but .tab-content elements won't be siblings because they have different parents.

This means your rules need to use .tabbrowser-tab in the selector for the sibling-testing part, like this:

.tabbrowser-tab[selected="true"] ~ .tabbrowser-tab .tab-content {-moz-border-image: url(data:image/png;base64,yadayada)}
.tabbrowser-tab[selected="true"]:-moz-window-inactive ~ .tabbrowser-tab .tab-content {-moz-border-image: url(data:image/png;base64,yadayada)}

I also moved :-moz-window-inactive just because I'm guessing that would result in a slightly-more-efficient selector, although I don't actually know that.

[RWerner]

Seems I have MUCH to learn! Thank you again mcdavis! It's functioning beautifully now.

[patrickjdempsey]

There are other tab selectors you may be interested in:

.tabbrowser-tab[afterselected="true"] - tab directly after the selected tab.

.tabbrowser-tab[beforeselected="true"] - tab directly before the selected tab.

.tabbrowser-tab[first-tab="true"] - first tab on the tab strip. This fails pretty miserably if you use Tab Groups or Pinned tabs, but works great without either.

.tabbrowser-tab[last-tab="true"] - last tab on the tab strip. Probably has the same problems as first-tab.

.tabbrowser-tab[pending="true"] - is a tab that is not loaded because of Options > Tabs > Don't load tab until selected setting.

.tabbrowser-tab[titlechanged="true"] - if the title of a tab changes. the default theme only uses this for styling pinned tabs, but it is on any tabs. this is very useful on sites like Facebook or GMail where the title of the tab changes to show new messages or notifications.

.tabbrowser-tab[unread="true"] - similar to titlechanged but also appears on first load for every tab that you haven't read. is also related or similar to pending if you have firefox set to not load tabs until selected.


https://developer.mozilla.org/en-US/docs/XUL/tab