How to use [attribute="value"] in a proper way?

Question

I've just realized that both following ways work. I'm not sure if I can omit label and just put [type="checkbox"].

I'm confused because the documentation is different than tutorials and people's code. Some people use elements, some omit them.

Does it play an important role? Is there any difference between these two versions?

I’d be grateful for some advice from a more experienced person.

<form action="/submit-your-photo" id="your-photo">
    <p>How would you describe yourself?</p>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="your photo URL" required>
    <button type="submit">Submit</button>
</form>

CSS:

I version:

 input[type="checkbox"]{
    margin: 20px 10px;
  }

II version:

[type="checkbox"]{
    margin: 20px 10px;
  }

Fo `label` you means html element `input` or html element of `label`. Judging from the context? you are asking what is the differences of selecting an html element `input` together with its attribute from selecting the attribute `[type='*']` directly, correct? — hcheung, Jan 23 '18 at 00:47

Michael Benjamin · Accepted Answer · 2018-01-23T00:39:52.100

3

The first version:

input[type="checkbox"]

... targets all input elements that have the type attribute with the exact value being checkbox ¹.

The second version:

[type="checkbox"]

... targets all elements that have the type attribute with the exact value being checkbox ¹.

It's the same as this:

*[type="checkbox"]

Since the checkbox type is only valid with input elements ², both selectors are practically identical. The first version has higher specificity ³.

In the following cases, there would be a significant difference.

section[class="blue-background"]

[class="blue-background"]

In the first case, only section elements with that class-value pair get a blue background.

In the second case, all elements with that class-value pair get a blue background.

¹ https://www.w3.org/TR/css3-selectors/#selectors

² https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#checkbox-state-typecheckbox

³ https://stackoverflow.com/a/35657646/3597276

edited Jan 23 '18 at 00:39

answered Jan 23 '18 at 00:23

Michael Benjamin

265,915
79
461
583

I read that documentation too, but I wasn't sure which one I had to cite. I still don't know which one is the leading one: [1] (https://www.w3.org/TR/css3-selectors/#selectors) or [2] (https://www.w3.org/TR/selectors/#attrnmsp) First, I have to figure out the difference between selectors' levels. – Codewife_101 Jan 23 '18 at 02:44
3

@Codewife_101: It seems that /TR/selectors was recently updated to point to WD-selectors4-20130502. **Avoid that draft at all costs.** It is severely out of date and I am incredulous that the CSSWG thought it was appropriate to redirect the main /TR/selectors URL to that extremely obsolete draft (it has pointed to css3-selectors for the last 12+ years, possibly even longer). My advice to you: follow the css3-selectors standard, as that is the current standard that all browsers use today, and **don't even worry about selectors-4**, as it is still in flux. – BoltClock Jan 23 '18 at 06:15
@BoltClock The w3c page is so confusing...I'm going to ask a question about navigating this website in the near future. Do you mean this [link] (https://drafts.csswg.org/selectors-3/)? If I'm in a hurry, I use shortcuts which means [MDN web docs] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). – Codewife_101 Jan 23 '18 at 07:27
@Codewife_101: Yeah or the one in Michael_B's answer will do (I'm actually unsure why they keep an ED of selectors-3, probably for minor revisions). – BoltClock Jan 23 '18 at 07:30
@BoltClock Wait...But Michael_B used [this link] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). Is it up to date? Which one is too old to follow? Is it possible to edit the answer/comment and strikethrough the bad/too old/irrelevant links? – Codewife_101 Jan 23 '18 at 07:38
1

@Codewife_101: Michael_B linked to /TR/css3-selectors. He didn't link to MDN. That said, MDN's list is more of a summary intended for web developers, and is equally current to the css3-selectors spec. You're on the right track. – BoltClock Jan 23 '18 at 07:39
@BoltClock 'It is severely out of date and I am incredulous that the CSSWG thought it was appropriate to redirect the main /TR/selectors URL to that extremely obsolete draft (it has pointed to css3-selectors for the last 12+ years, possibly even longer).' By that, you meant that one of documentation mentioned above referred to the old draft via internal links. Am I correct? That's why I was confused. I'm not proficient in reading, especially w3c docs. – Codewife_101 Jan 23 '18 at 07:46
2

@Codewife_101: Ah, sorry for the confusion. I meant that /TR/selectors always pointed to the current css3-selectors standard, until recently when it seems to have been updated to point to a L4 spec from 2013. That is an outdated version of the upcoming standard Selectors 4, and should be avoided. – BoltClock Jan 23 '18 at 07:58
1

Looks like they finally updated /TR/selectors (and /TR/selectors-4) to point to the latest draft at the beginning of this month. – BoltClock Feb 13 '18 at 16:53

score 2 · Answer 2 · answered Jan 23 '18 at 00:22

One looks for anything with that parameter, the other looks for input elements with that parameter. One is more specific than the other. And which one you should be using is up to your needs in selecting things to style, there's no "correct way" in that sense. (Even though in this case it normally doesn't matter since most of the time inputs would be the only elements with that parameter anyway.)

How to use [attribute="value"] in a proper way?

2 Answers2