CODEWITHSUNDEEP
htmlcss
Wanarka
Wanarka

Reputation: 91

CSS fomaring alternately for class and id

I made a scheme for step-by-step instruction. Eventually there will be many options, buttons, way.. But at the moment I'm try to paint red the buttons that are inactive. But css is connected to the "class". How do you make an "id" that has the higher priority than the "class" used for text Formating?

JSFiddle

<input type="button" name="coughyes" class="next action-button" id="red" value="Yes" />

/*buttons*/
#msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#red { 
    background-color: red;
}

Upvotes: 0

Views: 41

Answers (2)

Ross
Ross

Reputation: 141

Or if you wanted to keep the same markup, you could simply change background-color: red; to background-color: red !important;.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You can use the same selector and append your ID. 

#msform .action-button#red { 
  background-color: red;
}

Though you should use a class since you can only use an ID on the page once. Update your HTML and CSS to...

<input type="button" name="coughyes" class="red next action-button" value="Yes">
<input type="button" name="coughno" class="red next action-button" value="No">

#msform .action-button.red { 
  background-color: red;
}

Updated your fiddle http://jsfiddle.net/1x183c2t/3/

Upvotes: 1

Related Questions