can you have a look below and see if what im doing is completely wrong approach
The selector you're using doesn't exist. Please use Chrome or Firebug for Firefox then right click and inspect the tabs to see their structure, which will expose their classes and ids to be used as CSS selectors.
The method you're trying to use won't work however as the tabs don't have unique classes or IDs for you to easily target and style them, but you can do this with CSS3. Example as follows.
Code:
.cbProfile #cb_tabmain > .tab-row > .tab:nth-child(1) {
background-color: red;
}
.cbProfile #cb_tabmain > .tab-row > .tab:nth-child(2) {
background-color: blue;
}
.cbProfile #cb_tabmain > .tab-row > .tab:nth-child(3) {
background-color: green;
}
.cbProfile #cb_tabmain > .tab-row > .tab:nth-child(4) {
background-color: orange;
}
The above will style the background of the first 4 tabs. You can add more using nth-child and simply set what tab you want it to style in the order they display. The tab content it self does have a unique ID for each tab so you can target them specifically; example as follows.
Code:
.cbProfile #cb_tabmain > #cbtab12 {
background-color: red;
}
.cbProfile #cb_tabmain > #cbtab13 {
background-color: blue;
}
.cbProfile #cb_tabmain > #cbtab15 {
background-color: green;
}
.cbProfile #cb_tabmain > #cbtab23 {
background-color: orange;
}
The more easier approach is to use nth-child for this too. Example as follows. Note the below starts with 2 instead of 1 due to the tabs themselves being a child element of the tab container so tab content begins at 2.
Code:
.cbProfile #cb_tabmain > .tab-page:nth-child(2) {
background-color: red;
}
.cbProfile #cb_tabmain > .tab-page:nth-child(3) {
background-color: blue;
}
.cbProfile #cb_tabmain > .tab-page:nth-child(4) {
background-color: green;
}
.cbProfile #cb_tabmain > .tab-page:nth-child(5) {
background-color: orange;
}
You now should be able to style your tabs and their content individually.
krileon
