Cannot target body in CSS

Question

For some reason, I cannot change the CSS of the body of this HTML. In index.js I have a div with class name signIn with a body in it and when I try to change it's (the body) CSS in styles.css it doesn't work. What's weird is that I have a second js file (Roulette.js) with HTML and I can change the body just fine. As well as in index.js I have an h1 that I can target just fine.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Roulette from './Roulette';



class LogIn extends React.Component {

    render() {
        return (

            <div className="signIn">

            <body>
            <Router>
                <Switch>
                    <Route path='/signIn'>

            <h1>
               HELLO
            </h1>

UNRELATED CODE HERE

          </Route>
          <Route path="/roulette" component={Roulette}/>

          </Switch>
            </Router>


            </body>
            </div> 
        );
    }

}
ReactDOM.render(<LogIn />, document.getElementById('root'));

Roulette.js:

import React from 'react';
import MenuBar from './MenuBars'

class HomePage extends React.Component {
    render() {

        return (
            <div className="roulette">
                <body>


               <MenuBar />
               <h1>TESTING</h1>
               </body>
            </div>
        )
    }       
}

export default HomePage;

styles.css:

.signIn body {
  background-image: url(img/csgoImage.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #33333D; 
}

.signIn  h1 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: aqua;
}

.roulette body {
  background-image: none;
  background-color: green;
}

Answer 1

body is the second most parent element of your html. So, your css selector .signIn body means "body inside of class signIn". It should .signIn, body {/* your css here */}

.signIn, body {
  background-image: url(img/csgoImage.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #33333D; 
}

.signIn  h1 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: aqua;
}

.roulette, body {
  background-image: none;
  background-color: green;
}

Hope this solve your issue.

Cannot target body in CSS

Question

1 answers

solution1
1 ACCPTED 2020-05-16 15:34:59

Cannot target body in CSS

Question

1 answers

solution1 1 ACCPTED 2020-05-16 15:34:59

solution1
1 ACCPTED 2020-05-16 15:34:59