How do I color add a css style to an element inside another element

Question

I have a thing that is set up as

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}
/*
What I tried but didn't work:
#messages li #deleteButton { 
    background: pink; 
    color:lightblue;
}
*/
#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}
.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}

<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

What I want is that the button in even messages to have the color scheme of the odd messages and vise versa. I would like to achieve this without using two separate classes because the messages are caught and added to the list via JS.

Getter Jetter · Accepted Answer · 2018-10-30 21:54:38Z

2

Not sure if I understood correctly.

Like this?

ps: Also in your comment you are targeting an id #deleteButton but it is set as class.

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}

#messages li button {
    background-color: lightBlue;
    color: blue;
}

#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}

#messages li:nth-child(odd) button {
    background-color: pink;
    color: red;
}

.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}

<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

answered Oct 30, 2018 at 21:54

Getter Jetter

2,0811 gold badge22 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Electrox Mortem Over a year ago

Thanks. I didn't realize I was targeting an id instead of the class.

Temani Afif · Accepted Answer · 2018-10-30 21:55:58Z

You can simply do this:

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}

#messages li:nth-child(odd) .deleteButton { 
    background: pink; 
    color:red;
}
#messages li:nth-child(even) .deleteButton { 
    background: lightblue; 
    color:blue;
}

#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}
.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}

<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

Collectives™ on Stack Overflow

How do I color add a css style to an element inside another element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related