Differences between CSS selectors

Question

I do not know if this question has been asked before or not but right now I'm writing some css stylesheets like this

[myclass]{
/*some styles*/
}

html

<div myclass></div>

but I know many people write like this

.myclass{
    /*some styles*/
    }

html

<div class="myclass"></div>

What's the difference? Maybe some browsers support or not? or what about mobiles do they support it? Is it legal css style script?

The best way is .myclass, as [myclass] is for HTML attributes. Also, people can find it harder to understand your code. — Oliver
– Oliver, Commented Apr 17, 2015 at 2:44
@Tobsta is it some kind of unwritten rule for css to declaring with dot or hashtag? — Shaxrillo
– Shaxrillo, Commented Apr 17, 2015 at 2:46
@Shaxrillo hashtags are used to reference the id value of an element. Where dots are used to reference the class value — Drew Hammond
– Drew Hammond, Commented Apr 17, 2015 at 2:47
@DrewHammond I know but declaring pure css stylsheet which one better with dot or attr? — Shaxrillo
– Shaxrillo, Commented Apr 17, 2015 at 2:48
@Shaxrillo Check out this article on performance of using various types of CSS selectors. Attribute selectors are slower than single class selectors. Single class selectors are slower than id selectors — Drew Hammond
– Drew Hammond, Commented Apr 17, 2015 at 2:51

Drew Hammond · Accepted Answer · 2015-04-17 02:40:26Z

5

The [myclass] selector in your first example is not for classes, but rather other HTML attributes. See Attribute Selectors for more details.

edited Apr 17, 2015 at 2:40

answered Apr 17, 2015 at 2:35

Drew Hammond

5885 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shaxrillo Over a year ago

is there any restrictions about browser support?

Drew Hammond Over a year ago

@Shaxrillo Here's the browser compatibility

user663031 Over a year ago

Yes, we know that [...] is an attribute selector. The point is that the OP is proposing using attributes as a sort of proxy for or alternative to classes. The question is not does this work (it does), but if it's legal and supported (answer: it's not "legal" in the sense that it will fail validation, but it's legal in the sense of being valid syntactically; and yes, it is supported). The unstated questions are really "is it a good idea", and perhaps, "are there performance implications" (answer: no, and probably not).

score 1 · Accepted Answer · 2015-04-17 12:57:24Z

1

Although all browsers would support this attribute-based approach to "classes", and there are probably no meaningful performance differences, it's invalid HTML (will fail validation). It's a style I hadn't seen before, and the reason is that it is a bad idea. Classes have been around for years and have all kinds of supporting machinery and are understood by any beginning HTML programmer.

For instance, with "normal" class usage, you can use elt.classList.add, or $(elt).addClass, and add multiple classes at a time, and toggle them, and get the whole list with elt.className, and get elements with getElementsbyClassName. None of this machinery is available for your "class as attribute" animals. You'll have to use elt.removeAttribute to get rid of them one at a time, and then elt.setAttribute to add them back, use querySelectorAll('[myClass]') to look for them, etc.

edited Apr 17, 2015 at 12:57

answered Apr 17, 2015 at 12:29

user663031

3 Comments

Laurent S. Over a year ago

I don't see no elegance writing invalid HTML to implement a solution that can be achieved with more graceful and widely used notation. I just see a few characters less, but with a possibly high cost. If there's probably no meaningful perfromance impact on a tiny scale, on a larger scale it's another story. You also point other possible issues so I don't understand why your answer seems so open to such code... It is also obvious from the question "What's the difference?" from the OP he doesn't have such a good idea what he's doing, which may be a bigger issue if he continues that way...

user663031 Over a year ago

Point well taken. I did start off my answer by saying "It's invalid HTML". I have edited my answer.

Laurent S. Over a year ago

I like the Edit you made, +1 instead of -1 then :-) I'm not a validation-nazi, valid code is not an end in itself and with evolving standards what is valid today may be invalid tomorrow and vice versa, but I don't think we should ever advise to write invalid code just for personnal preference purpose. In the end the OP might realize how wrong he was and have a hard time going back while it's much easier to use common best-practices from the beginning.

Collectives™ on Stack Overflow

Differences between CSS selectors

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related