What is the difference between id selector and class selector when using border style

Question

I want to set border width to 0px, but border style doesn't work when I use class selector. On the other hand, the border width worked if I use id selector!

here is the html(vue template):

<el-form-item label="Title">
    <el-input type="text" id="title" name="title" placeholder="title" v-model="editForm.title"></el-input>
</el-form-item>
<el-form-item label="Tags">
    <el-input type="text" class="edit-input" v-model="editForm.tags"></el-input>
</el-form-item>

style:

.edit-input, #title {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 0;
    margin-bottom: 10px;
}

what I got:

I have no idea. Why border doesn't work when using class seletor? Or is there anything wrong in my code?

`border: 0` is valid CSS. https://stackoverflow.com/a/2922923/129086 — simmer, Jun 14 '20 at 06:15
Probably not enough specifity using class selector. Class has specifity 10, id has 100. More here ⏩ https://cssspecificity.com/ — Adam Orłowski, Jun 14 '20 at 06:27
@Adam Orlov I think you are right, it's the specifity problem, thank you very much! — winterszhang, Jun 14 '20 at 06:55
You are using [https://element.eleme.io/#/en-US/component/input][1]. While you are using `class` to your ``, they are not allowing your **Personal** class directly to your input. Look at the image https://i.stack.imgur.com/HsEGG.png. You can also see in your inspect. But they allow **ID**. For that purpose it is not working. So, if you want to use the class you have to use `.el-input-domain .el-input__inner { border: unset; } ` — Mr. Perfectionist, Jun 14 '20 at 07:01

simmer · Accepted Answer · 2020-06-15T16:24:59.153

Without seeing the other CSS that might be involved, the likely answer is CSS specificity.

There are many guides to CSS specificity out there such as this one, but the general math for CSS specificity is:

element selectors such as div = 1
class selectors such as .edit-input = 10
id selectors such as #title = 100

Because #id is such a heavily-weighted selector, it's a good idea to avoid using ids as selectors in CSS as much as possible. They're much harder to override in subsequent styling.

If other styling in the page includes a rule such as this (for example):

div .edit-input { /* selector "weight": 11 */
  border: 1px solid #DFE1E7;
}

Then this subsequent rule will have no effect, because it's less specific:

.edit-input { /* selector "weight": 10 */
  border: 0;
}

You'll need to provide a selector that is at least as specific, if not more so. Perhaps something like this:

.el-input .edit-input { /* selector "weight": 20 */
  border: 0;
}

To get this right, inspect the element using your browser's Web Inspector tools, and see what other CSS is getting applied. Then write your own CSS with enough specificity to override the existing default styling.

For exactly the reason that is causing OP's problem you should strongly advise against `id` selectors. — connexo, Jun 14 '20 at 06:34
@simmer Thank you so much! I think I got it. It was overrided by some other css. — winterszhang, Jun 14 '20 at 06:58

What is the difference between id selector and class selector when using border style

1 Answers1

To get this right, inspect the element using your browser's Web Inspector tools, and see what other CSS is getting applied. Then write your own CSS with enough specificity to override the existing default styling.