Member Avatar for Violet_82

quick question.Take this html

<form id="the_form">
    <input type="checkbox" value="ideal" name="ideal_drive"  id="ideal"><label for="ideal">This is a test only only</label><br>
...

Say I want to select the text in the label and give it a different colour. I tried this rule

#the_form label[for='ideal']{
    color:yellow;
}

It works ok but not in IE7. SO, I was thinking to use the :first-child selector:

#the_form label:first-child{
    color:yellow;
}

but it doesn't work at all.

Any idea what I can use to make sure it works on every browser?
thanks

  • 4 Contributors
  • 6 Replies
  • 121 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for JorgeM

I dont have IE 7 handy to test, but have you tried using jQuery?

<!DOCTYPE html>
<html>
<head>
 <title>Demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<form id="the_form">
    <input type="checkbox" value="ideal" name="ideal_drive" id="ideal">
       <label for="ideal">This is a test only only</label><br />
</form>  

<script>
  $('label[for="ideal"]').css('color', 'yellow');
</script>

</body>
</html>
Member Avatar for Violet_82

no I was hoping to keep it in the css to be honest, that's why I didn't use jquery : - )

Member Avatar for gavinflud

The problem is that :first-child is a pseudo-class that is not supported by anything less than IE8.

The first solution you gave is an attribute selector, which should be supported by IE7, you have to ensure you specify a doctype at the top your html file though.

If that doesn't work, your only pure CSS option would be to give the first label in the form it's own class or id, and define it's styles based on that selector.

Member Avatar for Baradaran

If you want to use the same color for all labels, simply use:

#the_form label{
color:yellow;
}

This makes the text of all labels yellow. If you want to use different colors or background colors, you have to use different classes.

Member Avatar for JorgeM

If you have no jQuery integration in the project, i wouldnt include the overhead just for this issue either.

Member Avatar for Violet_82

hi thanks all. gavinflud, can a label tag have an id? Sorry it didn't occur to me!

@Baradaran, no it's just one lable

@orgeM yes I include jquery in my project but I just wanted to use as much css as possible that's why I didn't want to use jquery to achieve this

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.