8

Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:

class="standard_label_style"

to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.

Follow Up

I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.

included.css:

.standard_label_style { color: red; }

test.html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="included.css">
    <style>
      .standard_label_style, label { }
    </style>
  </head>
  <body>
    <label class="standard_label_style">Test Label</label><br/>
    <label>Unclassed Test Label</label>
  </body>
</html>
Community
  • 1
  • 1
John Munsch
  • 19,530
  • 8
  • 42
  • 72

7 Answers7

19

CSS doesn't really work like that.

You can apply a style to all labels directly:

label {
    color: Lime;
}

or apply a class to all labels

.labelClass {
    color: Lime;
}

<label class="labelClass"></label>

You can also have multiple selectors, so you could ammend your current style to be

.labelClass, label {
    color: Lime;
}

What you can't do in standard CSS is something like

label {
    .labelClass;
}

The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.

fearofawhackplanet
  • 52,166
  • 53
  • 160
  • 253
8

To apply a style to every label on the page, use this CSS:

label {
/* styles... */
}

If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:

.standard_label_style, label {
/* styles... */
}

This will affect every label through the site, so use with caution!

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
  • That syntax doesn't apply it to every label, that syntax allows me to select both the standard_label_style AND any label tags to add or change styles associated with both. It doesn't do anything to make the style characteristics of standard_label_style apply to labels within the HTML. – John Munsch May 27 '11 at 19:30
4

In your css file, can't you just put

.standard_label_style, label
{
 //styles
}
AllisonC
  • 2,973
  • 4
  • 29
  • 46
3
.standard_label_style, label {
    /* stuff */
}
Pedro Correia
  • 793
  • 3
  • 8
  • Nope. That would allow me to revise what the standard_label_style is, but it doesn't make it apply to all labels. – John Munsch May 27 '11 at 19:27
  • Nope. Actually it "says" that all label elements and/or any element with the standard_label_style class applied to it, uses the defined style properties. – Pedro Correia May 30 '11 at 11:35
  • Thank you for your correction. Guess what, it still didn't make your answer correct... – John Munsch May 30 '11 at 15:46
  • Didn't mean to sound like a smart ass, but what you are trying to do is impossible. The only way is either by using any of the suggestions given to you or through JavaScript: http://jsfiddle.net/cdZHu/1/ – Pedro Correia May 30 '11 at 17:18
3

I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:

body.standard_label_style label{
   //Your styles here
}
Ian Jacobs
  • 5,456
  • 1
  • 23
  • 38
3

One of the most underused CSS tricks of all time: Give your bodies an id or class!

HTML:

<body id="standard_label_style">
    <label>Hey!</label>
</body>

CSS:

#standard_label_style label{
    the styles
}

will take the styles, while

HTML:

 <body id="custom_label_style">
     <label>Custom!</label>
 </body>

Will not.

Chris Sobolewski
  • 12,819
  • 12
  • 63
  • 96
0

You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).

Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:

The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".

There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?

Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.

Community
  • 1
  • 1
ninjagecko
  • 88,546
  • 24
  • 137
  • 145