Member Avatar for phoenix254

Hi eveeryoone,
Is it possible that span can have more the one id ?
i am tring like this

<span id="user Maxi">Maxi</span>
<span id="user John">John</span>
<span id="user Henry">Henry</span>
<span id="user Max">Max</span>
<span id="user Simon">Simon</span>

#user{
text-align:center;
display:inline-block;
width:50px;
height:20px;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
}

but it isnt working, why doesnt working css on this.

Edited by phoenix254
  • 4 Contributors
  • 3 Replies
  • 192 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Sam.Samual

Dani AI

Generated

was on the right track asking why styles didn’t apply. The root cause is the id values: they must be unique and must not contain spaces, so id="user Maxi" won’t match #user in CSS. As and suggested, use a shared class for styling and keep any unique identifier simple (no spaces) or use a data attribute for JavaScript logic. ’s AJAX idea isn’t needed for styling—classes and attributes solve this cleanly.

A practical pattern: use a single class for the visual rules and a data-* (or an extra class) for per-item hooks.

<span class="user" data-name="maxi">Maxi</span>
<span class="user" data-name="john">John</span>
<span class="user" data-name="henry">Henry</span>
.user {
  display:inline-block;
  padding:4px 8px;
  min-width:52px;
  text-align:center;
  background:#4CAF50;
  color:#fff;
  margin:4px;
  border-radius:3px;
  cursor:pointer;
}

/* target a single item without changing its id */
.user[data-name="maxi"] { background:#1E88E5; }

Quick JS pattern to grab the unique value for behavior:

document.querySelectorAll('.user').forEach(function(el){
  el.addEventListener('click', function(){
    console.log('clicked', this.dataset.name);
  });
});

Troubleshooting checklist:

  • Inspect the element in DevTools to confirm class/id values and which rules win (specificity).
  • Avoid duplicate ids; use id only for single-element hooks.
  • If you absolutely must match an id that contains spaces (not recommended), use an attribute selector like [id="user Maxi"] or proper escaping—better to rename to user-Maxi or maxi.

This keeps styling predictable and makes JS selectors simple and robust.

Recommended Answers

All 3 Replies

Member Avatar for drjohn

An id is meant to be a unique identifier. You can't have two unique identifiers on the same span, or same anything.
You can use multiple classes however - .user, .Maxi, .John, etc. But you don't give any styles for your Maxi, John, Henry etc styles. So without them, there will be no visible change.

It's just possible that the browser is trying to apply the styles for the last id you use, and in each case there are no styles for that id.

Member Avatar for OsaMasw

Ids can't be used like this, use classes insted , id must be one word and must be unique.

<span class="user" id="Maxi">Maxi</span>
<span class="user" id="John">John</span>
<span class="user" id="Henry">Henry</span>
<span class="user" id="Max">Max</span>
<span class="user" id="Simon">Simon</span>

.user{
text-align:center;
display:inline-block;
width:50px;
height:20px;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
}
Edited by OsaMasw
Member Avatar for Sam.Samual

you can use class for more than one entities. or you can use ajax for replacing the multiple ID

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.