RandyLahey
RandyLahey

Reputation: 979

CSS: How to target all elements within a given ID

Instead of doing the following to give a text color to all elements on the page:

* {color: red;}

Is there a way to only apply it to all elements within a certain id? Something like this:

#container * {color: red;}

Upvotes: 16

Views: 23439

Answers (5)

mpm
mpm

Reputation: 20155

#container * {color: red;}

Should work.

If you only want direct children to get the class, try

#container>*{color: red;}

What browser are you using? (brand + version)

Upvotes: 5

ctdeveloper
ctdeveloper

Reputation: 290

I would have thought:

#container * {color: red;}

Should work.

Upvotes: 2

Madara's Ghost
Madara's Ghost

Reputation: 174967

Actually yes, exactly like you mentioned.

#container * { color: red; }

Upvotes: 22

Teddy Huff
Teddy Huff

Reputation: 17

For your example, can you use jQuery?

$('#container').children().css('color', 'red');

EDIT: I was indeed wrong, serves me right for trying to answer on my lunch break with half a sandwich in my hand -.-

Upvotes: 0

Markus
Markus

Reputation: 687

We would be able to provide a much better solution if we were to see the HTML code as a reference.

What you are looking to do is use CSS selectors. (CSS Selectors

And it sounds like Attribute selectors may be an option for you. Attribute Selectors

For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:

h1[title] { color: blue; }

In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":

span[class=example] { color: blue; }

Upvotes: -1

Related Questions