0

Is there any difference between identifying an HTML element by class/id or by a custom attribute?

I mean, for example, if I have a menu and I want to change the color of the current (active) li element, I currently use this:

<style>
li[active]{color:red}
</style>

<ul>
    <li active>...</li>
    <li>...</li>
</ul>

But the most common usage is:

<style>
li.active{color:red}
</style>

<ul>
    <li class="active">...</li>
    <li>...</li>
</ul>

So what is the difference between them? I mean, they have the same result, but why don't people use the first method I wrote? That is much more simple and results in cleaner HTML source code.

Just for those who don't get the question... The first snippet I wrote is identifying an element BY HTML5 ATTRIBUTE. The second snippet is identifying an element BY CLASS.

So the question again: What's the difference between identifying an HTML element by HTML5 ATTRIBUTE and CLASS OR ID NAME?

Angel Politis
  • 10,955
  • 14
  • 48
  • 66
  • In very brief summary, id's [have a higher specificity (are more important) than classes](https://specificity.keegan.st/), and id's are unique on an HTML page. Read the link above to learn more. – Martin May 07 '17 at 19:14
  • I know what the difference between ID and CLASS. –  May 07 '17 at 19:17
  • 2
    But your question is asking specifically what the difference is between id and class, but then you say you know the difference... So what's the point of the question? `:-/` – Martin May 07 '17 at 19:17
  • Read again my question. :) –  May 07 '17 at 19:18
  • Possibly you're question could be reworded and made more specific, to what specific details of id's and classes you want to know. Also your first example is not an example of an `id` – Martin May 07 '17 at 19:19
  • This is not a duplicate. Please reopen this question. The OP wanted to know the difference between classes and custom HTML5 attributes for styling purposes. – kano May 07 '17 at 19:21
  • Come on... I edit my post just for you! (So funny...) –  May 07 '17 at 19:22
  • @Martin and @ cale_b I hope in the future you dedicate a little more time per question before flagging it as duplicates. If you'd have taken 20 seconds to go through Bob's examples, his intent would've been obvious. – kano May 07 '17 at 19:24
  • 1
    @Kano OP repeatedly used the term "id" which is a specific term for a specific part of the HTML infrastructure. Just because the OP *intended* to ask for something else, we can't magically know any more than what the OP writes. – Martin May 07 '17 at 19:25
  • Dear Martin. I edited my post. If you are not into HTML, please dont close my question because it is far far far away from marking as duplicated post.... –  May 07 '17 at 19:27
  • 1
    Bob, I have edited the title to better fit what you are actually asking. I did not close your question myself, questions get closed by mutual concensus of voters. I have nominated your question for reopening. It is important to be very clear in a question as to what you're asking to avoid these misunderstandings. `:-)` – Martin May 07 '17 at 19:29
  • Bob: this question seems to be what you're looking for: http://stackoverflow.com/questions/26784302/css-styling-using-custom-attributes-to-make-it-more-readable-good-or-bad – Martin May 07 '17 at 19:32
  • Okey thanks, hope I will get an answer soon. –  May 07 '17 at 19:33
  • read also: http://stackoverflow.com/questions/22703978/is-it-a-bad-practice-to-use-custom-html-attributes-and-style-them-with-css – Martin May 07 '17 at 19:34
  • 1
    @Bob And just so you'd get an answer whilst we wait for the question to be reopened - from the W3C spec: `Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.` ([link](https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes)). So to sum that up - certain attributes have certain intents. You _could_ apply custom attributes, but then you'd also later have to reinvent everything else that's related to the classList API. – kano May 07 '17 at 19:34
  • I see, so theres no performance difference, and I could use attribute identifying if I wish? –  May 07 '17 at 19:38
  • @Bob - Correct. In fact, the javascript library [AngularJS](https://angularjs.org/) does exactly this, with a collection of attributes that "do" things: `ng-if`, `ng-repeat`, `ng-show`, etc. – random_user_name May 07 '17 at 20:43

1 Answers1

2

Your active attribute example is invalid HTML, although it will usually (always?) work in practice because CSS is a separate spec that doesn't care about HTML's rules, and browsers try to do "what you mean" when it comes to invalid HTML.

Custom attributes should start with the data- prefix per the spec. These data attributes are usually used for associating an element with some extra data for use with JavaScript, although it's also possible to target them with CSS.

Technically, you could do something like

<li data-active="yeppers">

And then target it with CSS:

li[data-active='yeppers'] { ... }

However, that would be highly unusual and annoying for most anyone who had to look at your code.

Semantically, "active" isn't really data, and it's not necessarily unique to one element, so assigning class="active" makes the most sense.

James McManus
  • 66
  • 1
  • 5
  • Well, `active` is not actually invalid HTML. It's just not a predefined HTML5 attribute. It is, however, a perfectly valid HTML5 custom attribute. – kano May 08 '17 at 18:00
  • 1
    It's invalid _because_ it's not a predefined attribute and doesn't use the provided mechanism for custom attributes, which is `data-*`. If page authors were allowed (by the spec) to add arbitrary attributes, it would effectively prevent the spec from ever defining new attributes in a backwards-compatible way. Something like `ng-blah`, while invalid, is unlikely to ever conflict, but I wouldn't be so sure about `active`. – James McManus May 08 '17 at 20:53