CSS Class and Id with the Same Name

CSS class and id with the same name

Nope, perfectly acceptable.

A class is defined using a . and an ID is defined using a #. So as far as the browser is concerned, they're two totally separate items.

The only thing to be careful of is generating any confusion for yourself. It's probably best practise to keep the names different purely for code readability, but there's no harm in them being the same.

HTML - Using same name for an ID and a Class

Yes, it's valid to do it. It's not common to need to do it, though: it's a bit of a code smell. It may indicate you need to revisit your naming conventions.

To expand on the issue of naming conventions and semantics:

When you use an ID of wrapper, you're saying "This is the wrapper - the only one of its kind". When you use a class of wrapper you're saying "This is one of the wrappers, and there may be others like it". Saying both of those things at the same time is a bit weird, right?

I'd suggest that you use a specific ID: #primaryWrapper, #outerWrapper, etc. That means you're expressing 'primaryWrapper is one of the wrappers', which makes heaps more sense.

How to combine class and ID in CSS selector?

In your stylesheet:

div#content.myClass

Edit: These might help, too:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

and, per your example:

div#content.sectionA

Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass is faster than div#content.myClass because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!

Change Css Class of Same Id which is more than one Id with same name in html page

► First of all Id must be unique.

When ever you are using Id with the same name , try to use class instead of that.

Your solution will be something like

$('[id='+getJson.Id+']').removeClass('busy b-white bottom').addClass('on b-white bottom');

This is a simple method tho select all elements with same id.

$('[id=test]').removeClass('yellow').addClass('red')

.yellow{  background-color:yellow;}.red{  background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p id="test" class="yellow">q</p><p id="test" class="yellow">w</p><p id="test" class="yellow">e</p>

Can the id and a class have the same name of an html element?

Yup, you absolutely can. If you’re the only one working on the project, and if this is intuitive to you, go right ahead, no issues.

But when working with a larger team, it generally makes sense to use ids and classes that are little more descriptive in nature. For example, .left-primary-sidebar would tell me a whole lot more about the element than something like .aside, when going through the stylesheet.

Your naming choices are definitely valid.

Naming conventions can differ from company to company, so if you’re the only one working on the repo, you can set your own conventions.

How can I make a same class name unique to different pages

The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:

<body class="home">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

--or--

<body class="about">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

now you can use css like:

.home .top_container{}

.about .top_container{}

Multiple classes with the same name?

That's perfectly valid, and perfectly readable. Note particularly that the order the classes are declared in is not important. CSS works on the principle that the most-specific selector wins.

.color {color:orange;}

Defines that any element with class color is orange.

.first .color {color:blue;}

Defines that any element with class color that is a descendent of an element with class first is blue

.second .color {color:red;}

Defines that any element with class color that is an descendent of an element with class second is red

CSS Class and Id with the Same Name