CSS class not getting applied on Label of radio

Question

This is my CSS snippet:-

.radio label {
    color: blue !important;
}

This is how the HTML is:-

<label for="contactmethod_delivery" class="radio tg-control-label">Delivery</label>

But the output label is still not as per the color defined in the CSS...

Screenshot of the label

I hope I am not missing any information required. Please let me know if I did. Thank you.

You need to learn about CSS selectors, and what the white space means between strings. See: [Selectors (W3.org)](https://www.w3.org/TR/selectors-3/#selectors). — David Thomas, Jan 18 '19 at 09:46
This is not how you select `label` with a class of `radio`.. study css selectors and you will do it all by yourself — Fotis Papadamis, Jan 18 '19 at 09:52
@DavidThomas for the link. I hope I could find the original (duplicate) thread by myself... I searched quite a bit... (but even the auto-suggestions didn't list the one) — burf, Jan 18 '19 at 10:24

score 0 · Answer 1 · answered Jan 18 '19 at 09:48

0

Try this only radio is the class of label

.radio {
    color: blue !important;
}

answered Jan 18 '19 at 09:48

Umair Mehmood

514
1
11
24

score 0 · Answer 2 · answered Jan 18 '19 at 09:52

You need to check how you select in CSS. Check CSS-Selectors.

In this snippet you select all labels with the class radio.

label.radio {
  color: blue !important;
}

<label for="contactmethod_delivery" class="radio tg-control-label">Delivery</label>

score 0 · Accepted Answer · answered Jan 18 '19 at 09:58

$( "ancestor descendant" );

A descendant of an element could be a child, grandchild, great-grandchild, and so on, of the ancestor element. So, your Code tries to find label child or grand-child of a element having class="radio".

label.radio {
  color: blue !important;
}

Don't separate your selector with comma, if both of your selector is within the same element.

CSS class not getting applied on Label of radio

3 Answers3