Help - Search - Members - Calendar
Full Version: Is it possible to "clone" a div?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
UptonGirl


I have a number of divs for a site that are exactly the same in terms of size, float, margins etc . . But have to have different names ( div A ; div A1 ; div A2 and so on )

Is there a more efficient way to do this than making a brand new div with all it's various elements each time? I've tried cutting and pasting, with the idea of just renaming after, but something always goes wrong.


Ev
Darin McGrew
If you're creating <div id="a1"> and <div id="a2"> and <div id="a3"> and so on, and you want them all to have the same CSS properties, then it might help to create a class that is shared by all these div elements. For example, you could have <div id="a1" class="a"> and <div id="a2" class="a"> and <div id="a3" class="a"> and so on. The common properties could use the class selector, and the unique properties could use the id selector.

Is that what you are asking for?
pandy
There may be other ways too depending on the HTML structure.
http://htmlhelp.com/reference/css/structure.html (see Contextual Selectors)
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors (which is the same as the above under another name)

Or you could simply group them.
http://www.w3.org/TR/CSS2/selector.html#grouping
UptonGirl
QUOTE(Darin McGrew @ Apr 16 2009, 10:12 PM) *

If you're creating <div id="a1"> and <div id="a2"> and <div id="a3"> and so on, and you want them all to have the same CSS properties, then it might help to create a class that is shared by all these div elements. For example, you could have <div id="a1" class="a"> and <div id="a2" class="a"> and <div id="a3" class="a"> and so on. The common properties could use the class selector, and the unique properties could use the id selector.

Is that what you are asking for?



If the result of that will be that the div will conform to the class spec when i change the id - YES! I'm going to try that. Thanks.

I'll also look at Paddy's links.


Ev
Darin McGrew
QUOTE
If the result of that will be that the div will conform to the class spec when i change the id - YES! I'm going to try that. Thanks.
The class and the id will be separate. You can use whichever one makes sense, depending on whether you want a rule to apply to individual div elements (use id), or to all div elements of a class.
pandy
Darin! Are you encouraging classitis? biggrin.gif

Feels unnecessary to add class-clutter when grouping the already existing IDs would work as well.
UptonGirl
I ended up using the class with separate ids - and it worked well. I'll have to look into the other methods another time - bu this was pretty clean. The class was .audio the ids #a1 #a2 #a3 and so on. it just meant adding id=# to each
pandy
Didn't you have the IDs already?
UptonGirl
QUOTE(pandy @ Apr 17 2009, 02:59 PM) *

Didn't you have the IDs already?



I had to start the page from scratch. I did something DreamWeaver didn't like and could not undo it - not even from the code view. Must have lost track of something.

So - when I did, I went with the .audio id-a1 etc option.

harryarora
Somehow one has to be classiti, because there are not enough alternatives to do that some other efficient way. So I am agree with Darin. Sorry Pandy, I am not agree with the "classiti" one..
Give me knowledge if you have more on this.
pandy
As said, there already are IDs. Just group them for the common style definitions. I linked to recourses above, but...

CODE

#aaa,#bbb,#ccc     { /* common styles */ }
#aaa               { /* specific styles */ }
#bbb               { /* specific styles */ }
#ccc               { /* specific styles */ }
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.