CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 8511

CSS Selector for Class without Specific ID

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>

Upvotes: 1

Views: 91

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

You can also try this (this is just like regular expressions)

.tab-pane:not([id^='home'])
 {/*your code*/}

If you want to not include the id's which start with letter "h" then try the below one:

.tab-pane:not([id^='h'])
{/*your code*/}

Upvotes: 1

Prashant Singh
Prashant Singh

Reputation: 3793

You can access each of the individual classes by either using .tab-pane:eq(noOfClass) selector

Check examples here

OR You can also use :not selector .tab-pane:not(#home)

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 3

Elias Zamaria
Elias Zamaria

Reputation: 101053

Maybe you meant to do this:

.tab-pane:not(#home)

Upvotes: 1

Related Questions