Is It Okay to Add Id/Class to <Link> Tag

Is it okay to add id/class to link tag?

According to HTML 4.01 Transitional, id, class are document-wide selectors, and thus it is ok to have them in the link element.

Can an element have both an id and a class?

Yes, an element can have one ID (which must be unique!) and multiple classes at the same time. To have multiple classes, use a space between them, here's an example:

<div id="myID" class="class1 class2 class3">Content</div>

Should I aim to add a class/id to everything, or use other selectors

There's no hard and fast answer here.

A general rule of thumb might be to use classes when you want to group certain elements together, treat them the same and using a class is the only means of doing it.

In your last example for instance, there is strictly no need for a class.

But, using a class in example 3 will result in better performance, as the browser will located the relevant items quicker. Traded off against this is a slight reduction in code-legibility..
If you have class names on everything then it becomes harder to read the rest of the markup.

In short, in what you have shown above, what you have written is fine imo.

You should read this article though which covers selector efficiency.

Basically the order of efficiency is as follows:

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover

The performance difference between classes and Id's is normally irrelevant.

Going further down the list though, things slow down considerably.

This isn't an argument to add classes and id's everywhere - it just allows you to judge the trade-off between performance and maintainability.

Add a class to a-tag with specific ID-link

replace your code by the following code. All active classes will be removed and the href having current url will be active.

$('.active').removeClass('active');
$( "a[href='" + window.location + "']" ).addClass('active');

If u want to remove the active class from a specific section use class hierarchy like

$('.xyz .active').removeClass('active');

Adding a class to a div with an id equal to a link

$( 'li' ).on( 'click', function() {
   $('div').eq( $(this).index() ).addClass( 'active' );
});

But you need more restrictive to selectors.

If you want to show only one div at a time :

$( 'li' ).on( 'click', function() {
   $('div').removeClass( 'active' ).eq( $(this).index() ).addClass( 'active' );
});

When is it okay to use Id for styling?

I thought this well stated from the article CSS Lint is harmful

ID’s are extremely useful and you absolutely should use them. They are
the fastest way a browser can select a given element. They are useful
for in-page anchoring and if they’re already there in the markup then
use them as style hooks. They are also, oddly enough, perfectly
correct to use as long as they’re only ever one instance of that ID on
any given page.

Arguments about “selector specificity” are at best a stretch to
justify a bad rule. Author your CSS properly and you won’t fall into
any specificity traps. I can count on my hand the number of times
that’s been a problem for me in 6 years of coding CSS and HTML for a
living on various different types and scales of website.

The only time this rule could be called accurate is if you are using
ID’s to style a specific chunk of HTML with intent to allow its use
anywhere on the site. e.g., if you’re using it to style a HTML gallery
widget that a user can include on any page via their CMS. They may
specify more than one on a page. But, that’s the one and only time
it’s a concern.

The way you have it in your example is correct and it is ok to declare it multiple times in your css, you just dont want to use an id multiple time on elements.

---

Related Topics