Question

I have a series of elements with the class .tab-pane attached to it. They also each have their own unique ID. I am trying to select every .tab-pane that does not have the id #home. I have tried .tab-pane:not#home{...} but it did not work. Any suggestions?

Sample HTML

<div id="home"    class="tab-pane">...</div>
<div id="myself"  class="tab-pane">...</div>
<div id="contact" class="tab-pane">...</div>
<div id="resume"  class="tab-pane">...</div>

Answer 1

Try instead:

.tab-pane:not(#home) {
    color: red;
}​

JS Fiddle demo.

The thing that you’re not-selecting appears within the parentheses of the :not() selector, rather than appearing as a ‘chained’ pseudo-selector.

In this specific case, since the element you want to have not-styled is the first element, you could also use the general-sibling combinator ~ to style subsequent siblings differently:

#home ~ .tab-pane {
    color: red;
}​

JS Fiddle demo.

But this would, and could, only work if the differently-styled (or un-styled) element is the first, since CSS can only select elements that appear later in the DOM, either as subsequent siblings, or descendants, of earlier elements.

References:

• Selectors Level 3, negation :not() pseudo-class.