I want to style each div within an element

March 26, 2023

I want to style each div within my element using ‘& > div’ but it is not working. Can someone please explain?

This is my styles object within my class

const styles = {
    container: {
        display: 'flex',
        flexFlow: 'column',
    },
      informationPage: {
        marginTop: '70px',
      },
      grid: {
        '& > div': { backgroundColor: 'blue' },
        textAlign: 'center',
          display: 'grid',
          gridGap: '10px',
          gridTemplateColumns: 'repeat(3, 400px)',
          gridTemplateRows: 'repeat(3, 400px)',
      },
  };

This the component containing the multiple divs I am trying to style

return (
    <div className="HomePage">
        <div style={styles.container}>
            <span>
                <ToolBar/>
            </span>
            <span style={styles.informationPage}>
                <Title/>
            </span>
            <div style={styles.grid}>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
            </div>
        </div>
    </div>
  );

How can I achieve this without giving a style attribute to each div? I have looked online and have no luck with other solutions.

>Solution :

The wildcard for CSS is asterisk so change your & to * there BUT I would recommend you use classes not elements.
Your columns and rows seem off since you have more than 3.

Other things:

title is not a great element name and sometimes will not show up properly (see example)
I put some classes in and added some borders and background just to who what is what.
I prefer to NOT use px – all modern browsers default to 16px font size so 1rem = 16px so here I forced that; then we can use rem and em which will flow better on responsive layouts. I put examples in here for that.

gridTemplateColumns: 'repeat(3, 400px)', gridTemplateRows: 'repeat(3, 400px)',

Here is an example of of that:

body {
  font-size: 16px;
}

.home-page .container {
  display: flex;
  flex-direction: column;
  background-color: #ffff0033;
}

.home-page .container>* {
  border: solid #00ff00 1px;
  padding: 0.25rem;
}

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 5rem);
  grid-template-rows: repeat(3, 3rem);
  border: solid 1px red;
  grid-gap: 1rem;
  font-size: 2rem;
  color: white;
}

.my-grid>* {
  background-color: blue;
  border: white 2px solid;
  text-align: center;
}

<div class="home-page">
  <div class="container">
    <span> <toolbar>tools</toolbar> </span>
    <span class="information-things"><header>I have a header</header></span>
    <span class="information-things"><title>I have a title</title></span>
    <div class="my-grid">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </div>
</div>