0
227
ViewsWhy don't my images get styles assigned through their class or ID in my css file
Whenever I assign a className or id to my img tag in my javascript (using react.js) and then a style that references that id or class, the style does not get applied, however when I do the same for a div everything works fine.
<--javascript-->
import React from "react";
import TitleImage from './Images/TitleBG.png'
import TitleImage2 from './Images/TitleMG.png'
import TitleImage3 from './Images/TitleCG.png'
import './heade.css';
const TopHeading = () => {
return(
//Here is a div with the ID "TopHeading", this style gets applied.
<div id="TopHeading">
{/*This image with class "image1" does not get its style applied.*/}
<img className="image1" alt="Dofus" src={TitleImage}/>
<img width='auto' alt = "Memory Game" height='50px' src={TitleImage2}/>
<img width='auto' alt = "Character" height='50px' src={TitleImage3}/>
<div className="aDiv"></div>
</div>
);
};
<--css-->
#TopHeading{
display: grid;
align-items: center;
justify-items: center;
background-color: rgb(131, 192, 131);
height: 300px;
};
.image1{
border-style: solid;
width: auto;
height:250px;
}
.aDiv{
size: 50px;
border-style: solid;
Here you can see the ID's style getting applied to the div.
And here is the image with the class's style being ignored fro some reason:
·
Juan Pablo Isaza
1 answers
Answer question0
The semicolon before your class rule in your CSS is making your selector invalid. Don't put a semicolon outside of a rule's curly brackets { }.
This doesn't work
;
div
{
height: 50px;
width: 50px;
background: red;
}<div></div>While this does
div
{
height: 50px;
width: 50px;
background: red;
}<div></div>
·
Juan Pablo Isaza
Report
Answer question