:required or [required] CSS selector

Question

Browsing the MDN docs to see the status of a proposed pseudo-class, I came across :required (and by extension, :optional). Both of these have been around for a long time but I've only just learnt about them now.

How does this selector differ from using the attribute selector, [required]. Does it differ?

input:required or input[required]. I'll admit that input:optional is nicer than input:not([required]).

If it doesn't differ in any way, which should be used or does it not matter at all? Why were these two introduced when attribute selectors are around?

Same reason as :disabled vs [disabled] https://stackoverflow.com/questions/20141450/should-i-use-css-disabled-pseudo-class-or-disabled-attribute-selector-or-is-i — BoltClock, Aug 07 '22 at 04:51

score 3 · Accepted Answer · answered Aug 03 '22 at 00:03

input:required {
  border-color: blue;
}

input[required] {
  background-color: pink;
}

<input type="text" required>

Does it differ?

It doesn't really look like they differ functionally.

If it doesn't differ in any way, which should be used or does it not matter at all?

Functionally, I do not think it makes any difference. However,

Why were these two introduced when attribute selectors are around?

Along with pseudo-classes like :valid and :invalid, :required and :optional provide a consistent way to write css for form elements. I believe that was the intended purpose (from no source whatsoever, just my assumption).

As you also mentioned, it does help with reducing verbosity such as :not([required]).

One very minor difference is that `:required` and `:optional` only match form elements. `:not([required])` could match other elements like `
`s. I guess `[required]` could match non-form elements too, though as of writing that'd imply invalid html. — RickN, Aug 03 '22 at 00:16

Pedro Amaral Couto · Answer 2 · 2022-08-03T05:01:12.437

https://developer.mozilla.org/en-US/docs/Web/CSS/:required

The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.

Therefore:

:required {
  border: 2px solid #f00;
}

selects:

<input type="text" required />

but doesn't select:

<div required>
test
</div>

Though:

[required] {
  border: 2px solid #f00;
}

selects:

<div required>
test
</div>

Edited

Though a DIV element having a required attribute:

Nevertheless, CSS selects it and the element is rendered accordingly. That's a difference.
It's possible to make custom elements (Web Components) which might have required attributes. It seems YouTube has several web components. Frameworks, like Vue.js, React.js and Angular support web components. We might use external components with web components.
CSS is not only used for HTML. It's also used for XML. For instance, SVG.

https://developer.mozilla.org/en-US/docs/Web/CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

`div[required]` is currently invalid HTML so I would currently dismiss that, however, that doesn't dismiss the possibility of it ever becoming valid. — liam-milbel, Aug 03 '22 at 04:12
Despite that, it rendered with a red border. Therefore, `:required` and `[required]` are different, and I explained how (citing documentation and providing examples), answering the question appropriately. They would be only the same if there wasn't any difference. By the way: CSS is not only used for HTML. It's also used, for instance, for XML. Especially, in SVG. Therefore, saying they don't differ is incorrect. — Pedro Amaral Couto, Aug 03 '22 at 04:28
There are also custom HTML elements: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements — Pedro Amaral Couto, Aug 03 '22 at 04:45

:required or [required] CSS selector

2 Answers2

Edited