2

I need to apply CSS to a specific class and id of an element like this.

<div class="contents" id="contents">

I tried

#contents .contents { ... }

but it doesn't seem to work.

How to apply the css for a specific class and id ?

ADDED

With

#contents.contents {...} 

It works OK.

1
  • Are you saying you want to be able to use a class and ID to work together, or you want the class to only related to an ID? Commented Dec 20, 2010 at 17:31

2 Answers 2

2
#contents.contents { ... }

… should work fine. The problem is likely somewhere in code that you haven't shared with us.

#contents .contents { ... }

… means "An element that is a member of class contents that is a descendent of an element with the id contents"

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the answer, but with my Mac/Safari #contents.contents doesn't work.
I repeat: The problem is likely somewhere in code that you haven't shared with us.
Agree with David here. #id.class is a valid selector and should definitely work. That means there's something wrong with your code. Make sure you got the capitalization right on the selectors, there is NO space in between #content and .content, and make sure there is no other selector that is more specific which can overrule this.
2

In your example, if you're looking for only that ID, you can just use:

#contents { ... }

The class is unnecessary because the ID is unique and will only find that element.
However, if you want to apply it to that ID AND anything with that class, you want:

#contents, .contents { ... }

3 Comments

The class maybe necessary if an element with that id appears on multiple pages with different classes.
@prosseek: The comma allows you to apply a CSS block to multiple selectors so you don't have to duplicate the code for each one. Basically, it means OR. In my example #content, .contents { ... } says: Apply these styles to anything with an ID of content OR anything with a class of content. If you want to AND it, it would be #contents.contents { ... }.
@prosseek: Also, if those selectors are not working, make sure that you don't have duplicate elements with id="contents" on your page.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.