CODEWITHSUNDEEP
htmlcss
a_l_e_x
a_l_e_x

Reputation: 400

If I change one button with CSS, the other is also changed

I'm having a problem editing buttons using css.

In particular, I notice that if I modify the "Cancel changes" button, the "Delete article parts" button present in a different div is also modified.

Can someone help me?

.button[type=submit],[type=button] {
    width: 30%;
    background-color: rgb(24, 73, 32);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type=submit]:hover {
    background-color: #45a049;
}
<div class = "button">
   <button type = "submit" class = "full"> Save changes </button>
   <input type = "button" value = "Cancel changes"
   onclick = "clearResult (document.getElementById ('id'). value)" />
</div>

<div class = "buttons">
   <form action = "creaFrammento.html">
       <input type = "submit" value = "Add article part" />
   </form>

   <input type = "button" value = "Delete article parts" onclick = "confirmation ()" />
</div>

Upvotes: 0

Views: 999

Answers (2)

Maneesha Nirman
Maneesha Nirman

Reputation: 1

If you use.button it is an element selector which means the CSS applies to whole buttons in your HTML page. To prevent that you can use a class selector or id selector. but when we using javaScript we need this id selector so the recommended thing is to use a class selector.

Upvotes: 0

ruleboy21
ruleboy21

Reputation: 6371

That is because you are targeting any element with this property [type=button]. This targets both "Cancel changes" button and the "Delete article parts".

To target one specific element, you can give it an id and select the element with that id in your CSS. As you can see below, I've given the "Delete article parts" an id="delete-btn" so the CSS targeting #delete-btn will only apply to it.

.button[type=submit],[type=button] {
    width: 30%;
    background-color: rgb(24, 73, 32);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#delete-btn:hover {
    background-color: #45a049;
}
<div class = "button">
   <button type = "submit" class = "full"> Save changes </button>
   <input type = "button" value = "Cancel changes" id="delete-btn" onclick = "clearResult (document.getElementById ('id'). value)" />
</div>
<div class = "buttons">
   <form action = "creaFrammento.html">
       <input type = "submit" value = "Add article part" />
   </form>
   <input type = "button" value = "Delete article parts" onclick = "confirmation ()" />
</div>

Upvotes: 1

Related Questions