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

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>

CodePudding user response：

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>

CodePudding user response：

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.