Use Multiple Ids for Divs in CSS

Can an HTML element have multiple ids?

No. From the XHTML 1.0 Spec

In XML, fragment identifiers are of
type ID, and there can only be a
single attribute of type ID per
element. Therefore, in XHTML 1.0 the
id attribute is defined to be of type
ID. In order to ensure that XHTML 1.0
documents are well-structured XML
documents, XHTML 1.0 documents MUST
use the id attribute when defining
fragment identifiers on the elements
listed above. See the HTML
Compatibility Guidelines for
information on ensuring such anchors
are backward compatible when serving
XHTML documents as media type
text/html.

Use multiple IDs for divs in CSS

You have to put

#box-left a, #box-middle a, #box-right a {
    text-decoration:none;
    color:#000000;
}

Each value on the comma separator list is a selector on its own, it is not combined with the next elements:

#foo, .class p, #bar p:first-child a {
  something;
}

is equivalent to

#foo {
  something;
}

.class p {
  something;
}

#bar p:first-child a {
  something;
}

How to select multiple ids in CSS?

Use an attribute selector
on the id attribute:

[id^='test_id_'] { color: red; }

Description:

[attr^=value] represents an element with an attribute name of attr and whose first value is prefixed by "value".

What is the best practice for merging multiple ids with a single class in css?

I have 3 ids: #example1, #example2, #example3 which all share the same css class: .carousel-container

Not 100% sure if you mean the element shares the class or if you mean the id has a child element with the class because your CSS code tells me you have a child element but the problem sounds like you have the one element sharing the same id and class so here is the solution for both.

The code below will be targeting the child element of #example1

#example1 .carousel-container {...}

<div id="example1" class="carousel-container">
  <div class="carousel-container"></div> <!-- The CSS will target this element -->
</div>

The code below will target the element with #example1 with a class of .carousel-container

#example1.carousel-container {...}

<div id="example1" class="carousel-container"> <!-- The CSS will target this element -->
  <div class="carousel-container"></div>
</div>

So to target all the elements with an id of #example1, #example2, #example3 with a child element with the class of .carousel-container

#example1 .carousel-container,
#example2 .carousel-container,
#example3 .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

If you want to do something like your "tidy" version you'll have to use a preprocessor like SASS/SCSS or LESS

More about SASS

Is it possible to have multiple ID selectors in CSS

To answer your question, it works cross browser, and what you wrote is correct. Only "More stuff" will be in red.

But it is not recommended to use ID's for styling.
A nice reference to read more about this can be found here. The entire article is a great read by the way, if you want to learn more about writing good CSS!

The most important part of it, concerning IDs is:

• IDs can never be used more than once in a page.
• Classes can exist only once, or a million times in a page.
• IDs can often have their traits abstracted out into many reusable classes.
• An ID is infinitely more specific than a class.
• This means no amount of chained classes can override an ID.

Can a HTML element have multiple unique ID attributes?

Needed to know if an HTML element can have multiple attributes of ID's

Short answer? No because the browser will only render the first one.

See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id, it won't work.

That's because it seems like the second ID is being disregarded by the browser, as this is the output HTML:

<input type="text" id="identifier1">

If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.

Reference multiple (different) Div Id's using document.getElementById

The problem is that you've named both sets of functions the same thing. When you declare openNav the second time to show TTP, it replaces the first instance. An easy solution is to just declare two separate sets of functions, e.g.:

function openDoctrine() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeDoctrine() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openTTP() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeTTP() {
   document.getElementById("ttpNav").style.height = "0%";
}

and reference them as appropriate, e.g.:

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  ...
</div>
...
<span style="font-size:30px;cursor:pointer" onclick="openDoctrine()">☞ Doctrine</span>

In short, you can't reuse names in JavaScript (how should the engine know which function you're referring to?), so use different names more specific to the different task.

How to access two Ids in one css selector

#buttons input:nth-child(2), #buttons input:nth-child(3){
    margin-left:5px;
}

does this work for you ?

or simply:

#Cancel, #add{
    margin-left:5px;
}

With , seperation you start a complete new CSS Selector and combine them.

---

Related Topics