View Full Version : Selectively Applying CSS

11-29-2012, 02:29 PM
I'm trying to apply CSS to labels I have on my page. I would like the CSS to affect only the actual control labels that I put on the page and not labels that are rendered from controls like radio button lists. Is there a way I can do that without having to add a class to each label that I want to affect on my page?

11-29-2012, 02:55 PM
Declare your standard labels as:

label {//standard declarations;}

You can then target the specific labels in the form to be one thing by declaring something like:

form > fieldset > label {these styles will only affect label tags which are inside a form and a fieldset;}

Check out this simple example to see it in action:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<title>HTML Template</title>
<style type="text/css">

label {color: blue;}
form > label {color: red;}




<label>Global Label</label>

<label>Form Label</label>


P.S - I'm not sure if you are meant to use <label> tags outside of a form, maybe someone can clear that up??



11-29-2012, 02:55 PM
What do you mean by “labels that are rendered from controls like radio button lists”? Show your code, we aren’t psychic.

11-29-2012, 04:00 PM
Sorry...since I had been thinking about it, it made perfect sense to me :D
I'm applying a width to my labels on a form. If the radiobutton list labels get the width applied, they get messed up.

CSS to make the labels a certain width
label { width: 100px; }

I'd like this label like this to be styled with the label selector...no problem
<label>Late Submission</label>

This ASP.Net radio button list:

<asp:RadioButtonList ID="rblLateSubmission" RepeatDirection="Horizontal" RepeatLayout="Flow" runat="server">
<asp:ListItem Text="Yes" Value="Yes" />
<asp:ListItem Text="No" Value="No" Selected="True" />

Renders as a span with labels in it that I do not want to have the width applied
(I changed the IDs so they were not so long)

<span id="someId">
<input id="someId0" type="radio" name="someName" value="Yes" />
<label for="someId0">Yes</label><input id="someId_1" type="radio" name="someName1" value="No" checked="checked" />
<label for="someId1">No</label>