[RESOLVED] Apply a css class to all instances of an element?

**tr333** · Jan 31st, 2010, 04:44 AM

I have a css class "shadow" defined which specifies a default box-shadow for easily adding a shadow to individual elements. Is it possible to apply this class to all elements of a specific type (eg. all blockquote elements) without having to re-type the stuff inside .shadow{} into blockquote{} for each element? If it can't be done without javascript then I won't bother about it.

**Justa Lol** · Jan 31st, 2010, 05:17 AM

well if you type div { border:1px solid black; } then all divs will have a 1 pixel border thats solid black... so if i get what you mean is then just type the elements type for example ul { something} like this:

this adds a border around the blackquote

Code:

<html>
<head>
<style type="text/css">
blockquote {
border:1px solid black;
}
</style>
</head>
<body>

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

</body>
</html>

**kows** · Jan 31st, 2010, 11:45 AM

Code:

.shadow,
blockquote {
  /* this style will be applied to both elements with a .shadow class and blockquote elements */
}

**tr333** · Jan 31st, 2010, 07:51 PM

Originally Posted by kows

Code:

.shadow,
blockquote {
  /* this style will be applied to both elements with a .shadow class and blockquote elements */
}

Thanks. Don't know why I didn't think of that earlier

**Justa Lol** · Feb 2nd, 2010, 09:33 AM

oh sorry now i see kows has the class of the element i get what you mean

Code:

//class + id
.form #textbox { }

//multiple classess
.form .inputs { }
//multiple ids is same as classes... 

//class and elements
.form input { /*code for all inputs such as text, password, submit buttons...*/ }

//multiple elements like h1, h2...
h1, h2, h3, h4, h5, h6 { color:green; }

i got a good site that you can learn fast of: w3schools

**SambaNeko** · Feb 2nd, 2010, 10:58 AM

Code:

//class + id
.form #textbox { }

//multiple classess
.form .inputs { }
//multiple ids is same as classes...

These two are not right. The top one is actually "an element with id 'textbox' within an element with class 'form'." If you want to specify "an element with class 'form' and id 'textbox'," you cannot have whitespace between them (and I'm not sure, but the ID may have to go first):

Code:

#textbox.form{}

Same for multiple classes: no whitespace or else it's "class within a class."

Code:

.form.inputs{}

**kows** · Feb 2nd, 2010, 11:09 AM

from his comment about header tags in his code (h1, h2, h3, ...), I would assume he just forgot the commas in his example. but I'm not entirely sure.

anyhow, I've never seen the double class notation (.classone.classtwo), but I know I could find it handy.

**Justa Lol** · Feb 4th, 2010, 10:29 AM

if there is no comma then it will take the element h2 inside h1 and the element h3 inside h2 which is inside h1 which is not very good, therefore a comma(, not seperator xD).

Thread: [RESOLVED] Apply a css class to all instances of an element?

Thread Tools

Display

[RESOLVED] Apply a css class to all instances of an element?

Re: Apply a css class to all instances of an element?

Re: Apply a css class to all instances of an element?

Re: Apply a css class to all instances of an element?

Re: [RESOLVED] Apply a css class to all instances of an element?

Re: [RESOLVED] Apply a css class to all instances of an element?

Re: [RESOLVED] Apply a css class to all instances of an element?

Re: [RESOLVED] Apply a css class to all instances of an element?

Posting Permissions