...

View Full Version : Selectively Applying CSS



wannabe67
11-29-2012, 01: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?

LearningCoder
11-29-2012, 01: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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<style type="text/css">

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

</style>

</head>

<body>

<label>Global Label</label>

<form>
<label>Form Label</label>
</form>

</body>
</html>


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

Regards,

LC.

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

wannabe67
11-29-2012, 03: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" />
</asp:RadioButtonList>

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>
</span>

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum