Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 556
John Munsch Avatar asked May 27 '11 14:05

John Munsch


People also ask

How do you add a style to a label in HTML?

A style contains any number of CSS property/value pairs, separated by semicolons (;). The style attribute overrides any other style that was defined in a <style> tag or an external CSS file. This inline styling affects the current <label> element only.

How do I apply CSS to all elements except one?

Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.

How do I write CSS on the same page?

You can add inline CSS in a style attribute to style a single HTML element on the page. You can embed an internal stylesheet by adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML.


5 Answers

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.

like image 100
fearofawhackplanet Avatar answered Oct 16 '22 10:10

fearofawhackplanet


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!

like image 38
whostolemyhat Avatar answered Oct 16 '22 12:10

whostolemyhat


In your css file, can't you just put

.standard_label_style, label
{
 //styles
}
like image 28
AllisonC Avatar answered Oct 16 '22 10:10

AllisonC


.standard_label_style, label {
    /* stuff */
}
like image 3
Pedro Correia Avatar answered Oct 16 '22 10:10

Pedro Correia


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
}
like image 3
Ian Jacobs Avatar answered Oct 16 '22 10:10

Ian Jacobs