HTML5 JQuery Selectors

Question

I have always disliked using ids and classes as selectors for obvious reasons: ids are unique and classes have to do with styles and should be able to change without affecting functionality of the site.

I used to create things like

   <div rel="foo">...</div>

   $("[rel=foo]").click(..);

What is the proper way to do this with HTML5? I was tempted by role, but it appears, this attribute has a specific meaning and purpose.

I am just learning HTML5 and your help is greatly appreciated!

I think your supposition that "classes have to do with styles" is faulty. From the HTML 5 spec: "..authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content." Classes change the semantics of an element, they do not -- inherently -- describe how it looks. An element's visual style is a by-product of its meaning (only one of which are its classes), not the other way around. — J. Holmes
– J. Holmes, Commented Jun 9, 2012 at 15:16

Chamika Sandamal · Accepted Answer · 2012-06-09 15:09:19Z

1

You can add any number of classes to your element. And when you selecting, you can use one class as selector.

<div class="class1 class2 foo">

selector,

$(".foo").click(..);

you don't need to defined foo class inside your CSS

answered Jun 9, 2012 at 15:09

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

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

1 Comment

KateYoak Over a year ago

I do like your point. I dislike using classes as so specific to the element that they are not useful for others, e.g. class="button-on-signup-form" which I see in so many sites. I prefer the class="col notepad private" or something, indicating a variety of things I have defined to mean "this kind of a thing." Adding "collapsible" to it and tying it to functionality doesn't feel improper. I'll adopt the idea.

Tomek Buszewski · Accepted Answer · 2012-06-09 15:07:56Z

0

Try not using rel, choose title instead. Then you can use jQuery like this:

$('div[title="foo"]').click(...);

Using title, id or class is proper for HTML5. Also, I think you should revisit using classes and IDs as selectors - it's very handy, efficient and easy.

answered Jun 9, 2012 at 15:07

Tomek Buszewski

8,01515 gold badges70 silver badges116 bronze badges

1 Comment

KateYoak Over a year ago

While I do not like using title (it has a specific usefulness), I looked up rel and you are right - it's worse: "The REL attribute is used to give the relationship(s) described by the hypertext link, and describes the relationship of the destination of the link to the document containing the hypertext anchor -- consequently REL cannot be used unless an HREF is present. The value for REL is a space-separated list of relationship values." I'll stick with using classes as described by all the answers here. Thanks!

Jerome WAGNER · Accepted Answer · 2012-06-09 15:17:22Z

0

Don't go against the wildly accepted solution here: use the class attribute.

Try to elaborate a naming convention that maps the structure of your pages and components in these pages.

answered Jun 9, 2012 at 15:17

Jerome WAGNER

22.6k10 gold badges64 silver badges79 bronze badges

Collectives™ on Stack Overflow

HTML5 JQuery Selectors

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related