Select a label with CSS-CodePudding

I already found threads about this topic like these:

How to hide <label for=""> CSS

How to select label for="XYZ" in CSS?

So I thought it's going to be easy, but for now I had no success.

The label I try to reach is this one:

Inside of code snippets I tried the following:

label[for=payment_method_angelleye_ppcp]

.label[for=payment_method_angelleye_ppcp]

label[for="payment_method_angelleye_ppcp"]

.label[for="payment_method_angelleye_ppcp"]

After a couple of Google sessions, I wasn't able to find any other way of writing. It also seems that you don't set a "." in front of it for this case, but I also tried it, of course.

I believe label[for="name"] is the correct format in general...

But it seems something is missing. Inside the label there is a text and an image, but I don't assume that this plays a role in selecting the label?

CodePudding user response：

I put one in CSS and 1 in javascript

document.querySelector('label[for="ABC"]').style.color = 'blue';

label[for="XYZ"] {
  color: red
}

<label for="XYZ">XYZ: </label>
<input id="XYZ">

<label for="ABC">XYZ: </label>
<input id="ABC">

CodePudding user response：

Pierre's answer is good, I just want to clarify that label is an HTML element. Unless you have a CSS class "label", you would not be adding a period in front of the selector in CSS. You're correct, the content (images and text) inside of a label will not affect the selector we're trying to use but there may be other CSS interfering with what you're trying to do.