Is there a short way to achieve this with CSS?

Question

I am curious if there is a slightly faster way to achieve this.

Say, for example, I have the following CSS:

#main_login input[type=text], #main_login input[type=password] { } 

Is there a faster way? Sometimes I can have a line with many other declarations, i.e.

  #main_login blah, #main_login meh, #main_login getting_long, #main_login super_long { } 

Repeated many #main_login. I saw some advanced CSS'sers using asterix etc., and yet, to research similar things. I guess there is a better way to do what I do.

Any pointers?

Answer 1

The only way I know is to use something like LESS :

 #main_login { input[type=text] { } input[type=password] { } } 

Answer 2

Not really if you are not using another technology, such as SASS .

Asterix * used to target any element that is not related to their tag, so if only <blah> , <meh> , <getting_long> and <super_long> elements appear in #main_login , you can use something like ...

 #main_login * { /* property list */ } 

An alternative would be to modify your HTML so that all of these elements share a class attribute and then just target that class ... but then you change your HTML to serve your CSS when it should be the other way around.

Answer 3

You can try using an asterisk:

 #main_login * { .... } 

But since there is a reason why you are not just selecting all the elements, you need to use the CSS3 :not() selector to exclude certain elements:

 #main_login *:not(.foo, .bar,, div.exclude_me) { .... } 

You might be lucky just by creating a new class and applying it to these elements, since you can use multiple classes in CSS:

 <div class="underlined big orange foobar">Foobar</div> 

I do this sometimes with complex style sheets, since I can mainly write in English to describe the styles related to this element.

Answer 4

One of the best ways to make your css more concise and readable is to use SCSS / SASS - http://sass-lang.com/ . SCSS is a superset of CSS that lets you define variables, create mixins, and define nests. This requires that you use a preprocessor to generate the final css, but there are plugins for many of the available web frameworks.

The above may be rewritten as:

 #main_login { input[type=text], input[type=password] { ... } } 

Answer 5

It all depends on what sub-elements you are trying to match, and if there is a CSS selector type that matches your use case.

* can be used to match all elements, however it may be limited to:

 #main_login * { } 

This will match all elements in #main_login. Or you can use it for a specific type of element:

 #main_login div { } 

This will match all divs under #main_login.

Here is the CSS2 link for selectors:

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

CSS3 adds many new selectors, but is not supported by older browsers:

http://www.w3.org/TR/css3-selectors/#selectors

Answer 6

you may have a wrapper class or id

 <div class="wrapper"> <div id="main_login"> ... </div> </div> 

so the css definition for

 .wrapper { } 

will be sufficient. Or just define css for

 #main_login { }