javascript - CSS id selectors just won't work

In my react.JS project, I have a div. This div has a button, and a list. This list is marked clearly with id="results".

return <div>
    <Button label="Combine Cards" disabled={!this.propsbineReady} 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={'.jpg'}/></li>;                     
	        }) }
	    </ul>
	</div>;

In my react.JS project, I have a div. This div has a button, and a list. This list is marked clearly with id="results".

return <div>
    <Button label="Combine Cards" disabled={!this.props.bineReady} 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./mtg/multiverseid/123456.jpg'}/></li>;                     
	        }) }
	    </ul>
	</div>;

The styles.css file I have the displeasure of wrestling with looks something like this;

/* 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{
    /*height: 200px;*/
    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;
}

/* Those images when hovered over. */
ul li img:hover{
    /*height: 311px*/
    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;
}

/* The individual 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;
}

At the bottom is a style called li#results. I tried ul#results li, #results, ul li#results and nothing will make the damned result list change in style. I even told it it was important. I tried marking the list container as <ul 'id=results' /> and going off that. That too failed. What in the name of obscure CSS am I doing wrong?

(I have two other lists that aren't results, so I can't just change the list styling, either.)

Here's the resulting html:

<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>
    <span data-react-toolbox="ripple" class="style__wrapper___VXsUA" data-reactid=".0.0.0.1.0.0.2:1">
      <span role="ripple" class="style__normal___K1YSF" style="transform: translate3d(-207.688px, -199.32px, 0px) scale(1); width: 398.25px; height: 398.25px;" data-reactid=".0.0.0.1.0.0.2:1.0"></span>
    </span>
  </button>
  <br data-reactid=".0.0.0.1.0.1">
  <ul data-reactid=".0.0.0.1.0.2" id="results">
    <li data-reactid=".0.0.0.1.0.2.0">
      <span data-reactid=".0.0.0.1.0.2.0.0">0.8743035007251114</span>
      <span data-reactid=".0.0.0.1.0.2.0.1"> </span>
      <img src="https://image.deckbrew./mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2">
    </li>
    <li data-reactid=".0.0.0.1.0.2.1">
      <span data-reactid=".0.0.0.1.0.2.1.0">0.8663643850889716</span>
      <span data-reactid=".0.0.0.1.0.2.1.1"></span>
      <img src="https://image.deckbrew./mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2">
      ...8 more lines.
    </li>
  </ul>
</div>

That's with <ul id="results"/>. With <li id="results"/> the id tag just moves to all the line elements. With <ul class="results"/> I see nothing, no id or class at all.

Share Improve this question edited Jan 16, 2016 at 9:30 Rhumborl 16.6k4 gold badges41 silver badges46 bronze badges asked Jan 16, 2016 at 7:50 IronWaffleMan 2,7025 gold badges33 silver badges67 bronze badges

3 ID should be unique, use class instead. – Tushar Commented Jan 16, 2016 at 7:51
@Tushar: While that point is correct, CSS would generally style all elements with the id even if same id is used. I am feeling that there could be some other problem here. – Harry Commented Jan 16, 2016 at 7:58
@IronWaffleMan: Can you pickup the final HTML that is generated (from Console) and include it in question or create a demo? If I try your CSS with a dummy list (even with same id for all) it works. – Harry Commented Jan 16, 2016 at 8:01
Added html of the div that contains the list. – IronWaffleMan Commented Jan 16, 2016 at 8:10
1 i just created a fiddle based on your css and resulting html, changed li#results to #results li and the style was applied. Also setting id="results" on the lis instead and using your posted css worked. So not sure what exactly the problem is... I can see the background-color isn't applied to the whole li but that is because of the display:inline !important; – Rhumborl Commented Jan 16, 2016 at 9:27

| Show 7 more ments

4 Answers 4

Sorted by: Reset to default 12

I realized that the id in the module also turns into unique id, like the classes You can use this

// file: ./style.module.css
#green {
  color: green;
}

// file: main.jsx
import style from './style.module.css';

<div id={style.Green}>
  Text green
</div>

The linter from WebStorm says "Unresolved variable" but everything works.

react-toolbox uses CSSModules for styling and this is how you should be using them.

/* style.css */
.result {
  color: green;
}

When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names.

import styles from "./style.css";

...
<li className={styles.result}>{card.deviation}</li>

Your id #results in the css points to a li with that ID:

li#results{
  display: inline !important; 
  background-color: #7B8585 !important;
  color: #F8F8F8 !important;
  height: 200px !important;
  overflow: visible !important;
}

Your id results is on an ul-tag.

<ul data-reactid=".0.0.0.1.0.2" id="results">
    <li data-reactid=".0.0.0.1.0.2.0">
      <span data-reactid=".0.0.0.1.0.2.0.0">0.8743035007251114</span>
      <span data-reactid=".0.0.0.1.0.2.0.1"> </span>
      <img src="https://image.deckbrew./mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2">
    </li>
    <li data-reactid=".0.0.0.1.0.2.1">
      <span data-reactid=".0.0.0.1.0.2.1.0">0.8663643850889716</span>
      <span data-reactid=".0.0.0.1.0.2.1.1"></span>
      <img src="https://image.deckbrew./mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2">
      ...8 more lines.
    </li>
</ul>

Changing your CSS selector to ul#results should do the trick.

According to this issue on the CC Modules GitHub repo you can do one of the following options:

Make it global in the .css file using the following syntax:
```
:global(#results){ /* Your css rules here */}
```

Note however that this goes against the concept of localization that CSS modules is meant for.

Or in your JSX/TSX file use the id returned by the styles object created CSS Modules, as follows:
```
import styles from "./styles.css";

return (<li id={styles.results}></li>)
```

Note however that the ID will no longer be result but rather some generated id, so handle it accordingly.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS id selectors just won't work - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)