Есть 2 класса [css] .class1 {font-size: 10pt; color: #ffffff;} .class2 {width: 20pt; background-color: #cfcfcf;} [/css] Надо сделать так, чтобы эти оба класса применились к одному объекту, а результат был аналогичен такому <div class="class1 class2">1233</div> Но такую вещь провернуть тяжеловато - много менять страниц. Вот и хочется, чтобы в самом файлике css указать, что к class2 должны прибавиться свойства class1. Подскажите, пожалуйста!
Вот я и думаю. Просто у меня много классов и очень часто там повторяются атрибуты текста, без которых отображение неправильное. По мануалам пробежался - не увидел, вот и решил спросить.
Это немного не то. В твоем случае классам с разными названиями присваиваются одни и те же свойства. А мне необходимо, чтобы присвоились классу свойства другого.
Можно подключить JavaScript, например в jQuery: [js]$(function(){ $('.class1').addClass('class2'); }[/js] Хотя я наверно не понял сути вопроса, т.к. в первом случае увидел бы тоже самое.
Извиняюсь, если не внятно объясняю. Попробую по-другому. Есть страницы с разными модулями, где в разных случаях употребляется много классов, но иногда у них попадаются одинаковые свойства, например - текстовые. Для примера допустим, что класса всего два и у них одинаковые свойства для текста. Для удобства редактирования и просмотра я хочу выделить одинаковые свойства и создать для них отдельный класс и его подключить к тем классам, в которых эти свойства были. Все это должно быть в css файле, поэтому javascript не пойдет. В принципе, можно и без этого, но если выделить одинаковые свойства в новый класс, то у остальных классов будет "меньше" свойств, следовательно - меньше каши. Сейчас так: [css] .class1 {font-size: 10pt; color: #ffffff; width: 20pt; background-color: #cfcfcf;} .class2 {font-size: 10pt; color: #ffffff; width: 40pt; background-color: #123456; cursor: default; display: block;} [/css] Хочу сделать так: [css] .mainfont {font-size: 10pt; color: #ffffff;} .class1 импорт .mainfont {width: 20pt; background-color: #cfcfcf;} .class2 импорт .mainfont {width: 40pt; background-color: #123456; cursor: default; display: block;} [/css]
HTML: <html> <head> <style type="text/css"> .class1 { color: Red; } .class2 { border: 1px solid blue; } </style> <script type="text/javascript"> function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } function update_style() { var els = getElementsByClass('class1'); for(i=0;i<els.length;i++){ els[i].className += ' class2'; } } </script> </head> <body> <div class="class1"> text text text </div> <div class="class1"> text text text </div> <div class="class1"> text text text </div> <div class="class1"> text text text </div> <div class="class1"> text text text </div> <div class="class1"> text text text </div> <script type="text/javascript"> update_style(); </script> </body> </html> )))))
Откуда такие вопросы берутся =) Это что нужно было нагородить в вёрстке, чтобы такие извращения могли понадобиться.
[css].class1, .class2 {font-size: 10pt; color: #ffffff;} .class1 {width: 20pt; background-color: #cfcfcf;} .class2 {width: 40pt; background-color: #123456; cursor: default; display: block;}[/css]
AlexGousev Для конкректно рассмотренного примера подходит. Но у меня больше классов. Ладно, так и сделаю. Спасибо всем!