: before using attribute selector

Question

I have the following html form

<div> <p>Field1</p> <input type="text" name="fld_one" id="fld_one" value="" /> </div> <div> <p>Field2</p> <input type="text" name="fld_two" id="fld_two" required value="" /> </div> 

I want to use CSS to indicate the required fields, e.g.

 div input[required]:before { color: #f00; content: "*"; } 

However, this css line does not make visible changes to the document.

For reference, I managed to change all required fields with the following:

 div input[required] { background-color: #000; } 

TL DR - Could: before a pseudo-class be used with an attribute selector? If so, how?

Answer 1

:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you cannot use it with input elements with some browsers because it is a replaced element. (Some browsers, because they are not very clearly defined, should they work, although most tend to "no.")

The reason your attribute selector works is because you apply styles to the input element itself, which works sequentially in every browser.

Answer 2

Debugging process:

• Remote attribute selector. Still star
• Remote selector. Still star

• Substituted input selector with select div, Star before div

  Conclusion: Input is problematic.

• Google: input before css

• The first result gives an explanation.

---

Pseudo-elements do not work with input elements because they have no content.

From the specifications:

Authors determine the style and location of generated content using: before and: after pseudo-elements. As their names show :: before and: after pseudo-elements, indicate the location of the content before and after the contents of the document tree . The content 'property in combination with these pseudo-elements indicates that it is inserted.

Input elements do not have child Nodes in the DOM, so there are no pseudo elements.

---

TL DR

Pseudo-elements work with any selector, including attribute selectors, but they cannot be applied to inputs.

---

A simple solution:

Apply stars to shortcuts instead of input elements (as logical user intuition states).

Answer 3

:before not valid on <input> since it does not have “content” - see: generating CSS content before or after input elements for a full explanation.

The "traditional" way to do this is to insert * on p or label (the label is more semantic).