In my React.JS project, I am working with a div that contains a button and a list. The list is specifically identified by the id "results".
return <div>
<Button label="Combine Cards" disabled={!this.props.combineReady} onClick={this.handleClick} accent primary raised />
<br />
<ul >
{ JSON.parse(this.state.data).resultCards.map(function(card){
return <li id="results">{card.deviation} <img src={'https://image.deckbrew.com/mtg/multiverseid/123456.jpg'}/></li>;
}) }
</ul>
</div>;The styles.css file I am dealing with has the following structure:
/* The list container. */
ul{
list-style: none;
display: inline-block;
width: 263px;
text-align: left;
}
/* The individual list items. */
ul li{
display: block;
padding: 15px 20px;
background-color: #F8F8F8;
color: #7B8585;
margin-bottom: 3px;
position: relative;
transition: 0.3s;
}
/* The card images within the list items. */
ul li img{
transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-webkit-transform: scale(0.6, 0.6);
align: top;
padding: 3px;
transition: 0.3s;
}
/* Images when hovered over. */
ul li img:hover{
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
ul li a{
position: absolute;
left: 160px;
font-size: 12px;
line-height: 16px;
color: #969d9d;
}
/* List items when hovered over. */
ul li:hover{
background-color:#d8f2f1;
}
li#results{
display: inline !important;
background-color: #7B8585 !important;
color: #F8F8F8 !important;
height: 200px !important;
overflow: visible !important;
}There seems to be an issue with the styling of the list marked with id "results". Various attempts to target and modify the styling, including using li#results, ul li#results, and ul#results li, have not been successful. Any insights on how to correct this would be greatly appreciated.
(Note: There are two other lists in the project that need to maintain their separate styling.)
Below is the resulting HTML structure:
<div data-reactid=".0.0.0.1.0">
<button class="style__raised___3-PWA style__primary___zmQdT" data-react-toolbox="button" data-reactid=".0.0.0.1.0.0">
<span data-reactid=".0.0.0.1.0.0.1">Combine Cards</span>
... (remaining HTML content stripped for brevity)The issue persists with different approaches like using <ul id="results"/> or <li id="results"/>. Strangely, with <li id="results"/>, the id seems to apply to all line elements, while using <ul class="results"/> results in no visible id or class tags at all.