Geek Answers Handbook

I want to apply an existing CSS style to all the labels on the page. How?

Note that this is different from the old question. How can I apply CSS to all the buttons that are on this page? because it is an existing style. Therefore, given that the style we will call "standard_label_style" already exists in the included CSS file, what can I do to say that all the labels on this page should have this style without adding:

class="standard_label_style"

for each of them? And yes, I know that I can apply ex-post-facto styles with jQuery or JavaScript code snippet. I'm just trying to find out how I should do this with CSS.

Follow up

I came up with a few comments that say that just use syntax like this .standard_label_style, shortcut ... Unfortunately this doesn’t mean anything that I want. This would allow me to apply additional rules to the standard_label_style class, as well as the rules for labels on this page, but would not allow me to apply this style to all labels on this page. To see an example of this, here is a stylesheet and html for demo. A label without a class will still not be red, but what I hope to do. I want to apply an existing class to all these labels on the page, and not just to the class and without adding a new style 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>
+7
source share
7 answers

CSS doesn't work like that.

You can apply style to all shortcuts directly:

 label { color: Lime; }

or apply class to all tags

 .labelClass { color: Lime; } <label class="labelClass"></label>

You can also have multiple selectors, so you can change the current style to

 .labelClass, label { color: Lime; }

What you cannot do in standard CSS is like

 label { .labelClass; }

The good news is that there are many server-side libraries that make CSS less sucking and allow you to do just such things like dotLess if you use .NET, which provides nested rules and a basic inheritance model.

+11
source

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

 label { /* styles... */ }

If you already have an existing style (for example, "standard_label_style") in CSS, you can apply it to each label:

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

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

+8
source

In your css file you cannot just put

 .standard_label_style, label { //styles }
+4
source 
 .standard_label_style, label { /* stuff */ }
+3
source

I'm not sure if you can ... one possible workaround (it seems a bit hacky) is to bind the style to your body tag and then change the css like this:

 body.standard_label_style label{ //Your styles here }
+3
source

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

HTML:

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

CSS

 #standard_label_style label{ the styles }

will take styles, and

HTML:

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

Will not.

+2
source

Here you are dealing with CSS priority. Declarations that are “more vague” (body tag, classes) apply before declarations that are “less vague” (specific elements, inline CSS).

So your answer depends on how the stylish table defines label styles. If, for example, he says label {...} , then this is quite specific, and it is best to use a more specific CSS style, see

The level of "specificity" that you need to redefine, as I said, depends on how specific your other stylesheet is. According to the link, "CSS embedded in html always comes after external style sheets, regardless of order in html."

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

Note that if you want to completely override another stylesheet, you will also need to reset any CSS that you don't use, by setting its values ​​to inherit or, if necessary.

0
source

More articles:


All Articles