Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set one CSS rule for two tags?

Tags:

html

css

tags

I would like to know how I can set one setting for two different classes.

To give an example:

.footer #one .flag li .drop_down form div{     width: 80px;     font-family: Arial, Helvetica, sans-serif;     font-size: 11px;     text-align: left;     line-height: 1.5;     color: #ccc;     font-weight:bolder;     margin-left: 30px; } .footer #two .flag li .drop_down form div{     width: 80px;     font-family: Arial, Helvetica, sans-serif;     font-size: 11px;     text-align: left;     line-height: 1.5;     color: #ccc;     font-weight:bolder;     margin-left: 30px; } 

Both rules have the same content. The difference is just the second tag. Is there a way to do something like this?

.footer >>>#one and #two<<<< .flag li .drop_down form div{         width: 80px;         font-family: Arial, Helvetica, sans-serif;         font-size: 11px;         text-align: left;         line-height: 1.5;         color: #ccc;         font-weight:bolder;         margin-left: 30px;     } 
like image 256
bonny Avatar asked Dec 20 '12 14:12

bonny


People also ask

How do I apply the same CSS to multiple tags?

To apply the same CSS styles to more than 1 HTML elements tags, you can separate various HTML element tags selectors by using the , (comma character) in CSS. This will set the text color of both paragraphs to red . Like this, you can apply one style to many HTML element tag selectors separated by the comma character.

How do I make a rule more specific in CSS?

As a special case for increasing specificity, you can duplicate weights from the CLASS or ID columns. Duplicating id, class, pseudo-class or attribute selectors within a compound selector will increase specificity when overriding very specific selectors over which you have no control.


1 Answers

Separate the selectors with a comma:

.footer #one .flag li .drop_down form div, .footer #two .flag li .drop_down form div {     /* Rules */ } 

From the selectors level 3 spec:

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.

like image 168
James Allardice Avatar answered Oct 08 '22 16:10

James Allardice