Why do element ID's with similar code have to be defined in separate files?

Question

When trying to make a navigation header using <button> tags instead of <a> tags, I noticed that the id for a normal button and the id for an active button (the button for the page that is selected) cannot be defined in the same file. I define all my CSS code in a file that is linked to my HTML/PHP documents and had to instead define my active button ID in a <style> tag in the <head> section of my code. Thus, I wonder is there a way to define my normal buttons and active button in the same CSS file; preferably because I don't want a huge <style> section in my HTML files?

Non-working code:

Styles.css

#NavBtn {
    background-color: deepskyblue;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    border: 2px solid deepskyblue;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px gray;
}
#NavBtn:hover {
    background-color: deepskyblue;
}
#NavBtn:active {
    position: relative;
    top: 1px;
    border: 2px solid black;
}
#NavBtnActive {
    background-color: deepskyblue;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    border: 2px solid yellow;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px gray;
}
#NavBtnActive:hover {
    background-color: deepskyblue;
}
#NavBtnActive:active {
    position: relative;
    top: 1px;
    border: 2px solid black;
}

Home.html

<head>
<link rel="stylesheet" type="text/css" href="Design.css">
</head>
<body>
<button id="NavBtnActive">Home</button>
<button id="NavBtn">Test</button>
</body>

This code outputs the desired button format for all buttons with id="NavBtn" but outputs the standard html button format for the active button with id="NavBtnActive"

My inefficient solution:

Styles.css

#NavBtn {
    background-color: deepskyblue;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    border: 2px solid deepskyblue;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px gray;
}
#NavBtn:hover {
    background-color: deepskyblue;
}
#NavBtn:active {
    position: relative;
    top: 1px;
    border: 2px solid black;
}

Home.html

<head>
<link rel="stylesheet" type="text/css" href="Design.css">
<style>
#NavBtnActive {
    background-color: deepskyblue;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    border: 2px solid yellow;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px gray;
}
#NavBtnActive:hover {
    background-color: deepskyblue;
}
#NavBtnActive:active {
    position: relative;
    top: 1px;
    border: 2px solid black;
}
</style>
</head>
<body>
<button id="NavBtnActive">Home</button>
<button id="NavBtn">Test</button>
</body>

Revised code based on feedback but still doesn't work:

Styles.css

.navBtn {
    background-color: deepskyblue;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    border: 2px solid deepskyblue;
    display: inline-block;
    cursor: pointer;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px gray;
}
.navBtn:hover {
    background-color: deepskyblue;
}
.navBtn:active {
    position: relative;
    top: 1px;
    border: 2px solid black;
}
.navBtn.active {
    border: 2px solid yellow;
}

Home.html

<head>
<link rel="stylesheet" type="text/css" href="Styles.css">
</head
<body>
<button class="navBtn active">Home</button>
<button class="navBtn">Test</button>
</body

all buttons with id="NavBtn"... .that's where you're wrong. IDs are unique, you should use classes instead. — Facundo Corradini, Mar 17 '18 at 21:16

Daniel Beck · Accepted Answer · 2019-01-12T15:28:59.130

One element can't have multiple IDs. And each ID must be unique within a document: trying to use the same ID for more than one element on the same page will cause errors.

So the way you're constructing your CSS is going to require a lot of repetition: since everything's defined based on IDs it can only apply to a single element, so if you have five identical buttons you'll have to have five copies of the same CSS.

Use IDs only when you need to refer to a single specific element. For most styling purposes it's preferable to use classes (which can be repeated across multiple elements, and more than one of which can be applied to the same element.)

So you might have

.navBtn { /* styling for all nav buttons */ }
.navBtn.active { /* additional styling for active buttons */ }

<button class="navBtn">A normal button</button>
<button class="navBtn active">An active button</button>

The navBtn rules would apply to both elements. The navBtn.active rules would apply only to elements which have both classes. (As with any CSS, the more specific the selector, the higher priority the rule will take -- so you can override navBtn rules within navBtn.active if necessary, but won't need to repeat the rules that you want to apply to both states.)

the id for a normal button and the id for an active button (the button for the page that is selected) cannot be defined in the same file.

That isn't correct; you can certainly define multiple IDs in the same file. You haven't shown your HTML, so I can't be certain, but I suspect the issue was that you were trying to apply multiple IDs to the same element, and the browser ignored the second one.

Here's a worked example using your CSS. (I removed the obsolete vendor-prefixed rules, and the duplicate rules.)

.navBtn {
    background-color: deepskyblue;
    border-radius: 28px;
    border: 2px solid deepskyblue;
    display: inline-block;
    color: white;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-shadow: 0px 1px 0px gray;
}

.navBtn.active {
    border: 2px solid yellow;
}
.navBtn:active, .navBtn.active:active {
    border: 2px solid black;
}

<button class="navBtn" id="NavBtnActive">Home</button>
<button class="navBtn active" id="NavBtn">Test</button>

I wouldn't use the verb **"can"** in the initial statements. They can. But it's illegal and generates hard to debug errors. I'd also trade *"two"* for *"multiple"*. — tao, Mar 17 '18 at 21:37
I have revised my initial question with more code to be more descriptive. However, now I have an issue with none of the classes being able to display the correct button format... — Caden Pang, Mar 17 '18 at 21:45
@CadenPang, please note you're not supposed to change the scope of the question nor to ask subsequent questions when the initial one has been answered. SO questions are not seminars around a project where people help asker as their project evolves. They have to be specific and generic enough to help other people with the same type of problem. They need to remain relevant. Another important aspect is that you have to read documentation before asking. You need to link what exactly led you to believe your code should behave the way you expect. (Re)search before asking is not optional on [SO]. — tao, Mar 17 '18 at 21:51
Thank you for including the code snippet and explaining the obsolete code, that helps :) — Caden Pang, Mar 17 '18 at 21:52

Why do element ID's with similar code have to be defined in separate files?

1 Answers1