CODEWITHSUNDEEP
csscss-selectors
willdanceforfun
willdanceforfun

Reputation: 11240

Is there a shorthand way to achieve this with CSS?

I'm 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 might have a line with many more declarations in it ie

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

 }

Thats a lot of #main_login repeating. I've seen some advanced CSS'ers using asterix's and so forth and yet to explore that sort of thing. I imagine there's a better way to do what I'm doing.

Any pointers?

Upvotes: 4

Views: 723

Answers (6)

Adam Ayres
Adam Ayres

Reputation: 8900

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.

The * can be used to match all elements, however it can be scoped:

#main_login * { }

This will match all elements under #main_login. Or you can scope it to a particular element type:

#main_login div { }

This will match all divs under #main_login.

Here is the CSS2 reference for selectors:

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

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

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

Upvotes: 1

Blender
Blender

Reputation: 298096

You could try using an asterisk:

#main_login *
{
  ....
}

But since there is a reason you don't just select all elements, you'll have to use CSS3's :not() selector to exclude certain elements:

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

You might have better luck just by creating a new class and applying it to those elements, since you can use multiple classes within CSS:

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

I do this sometimes with complicated stylesheets, as I can basically write in English to describe the styles pertaining to that element.

Upvotes: 2

tilleryj
tilleryj

Reputation: 14379

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

The above could be rewritten as:

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

Upvotes: 1

AdamH
AdamH

Reputation: 2201

Only way I know of is to use something like LESS:

#main_login {
    input[type=text] {
    }

    input[type=password] {
    }
}

Upvotes: 2

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

Not really, unless you use another technology like SASS.

The asterix * is used to target any element, irrelevant of their tag - so if nothing but <blah>, <meh>, <getting_long> and <super_long> elements appear inside of #main_login, you could use something like...

#main_login * { /* property list */ }

The alternative could be to modify your HTML so all those elements share a class attribute, and then simply target that class... but then you're changing your HTML to cater to your CSS when it should be the other way around.

Upvotes: 2

gok
gok

Reputation: 1157

you can have a wrapper class or id 

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

so defining css for

.wrapper {
}

would be enough. Or just define css for 

#main_login {
}

Upvotes: -1

Related Questions