Basically, I have a react app which is consist of little compoennts like menu home random(its a program), and every child has its own css. but when I write css for home it works in every child. for example when I wrtie div 50px every div in my app becomes 55px. Is there any way to stop this behavior?
2
-
Every css file imported gets in scope for the rest of the project, that's why you want to use more specific selectors to prevent targeting more elements than those you need.Juan De la Cruz– Juan De la Cruz2021-02-12 13:41:36 +00:00Commented Feb 12, 2021 at 13:41
-
Please show code as text, not as a picture of text.Heretic Monkey– Heretic Monkey2021-02-12 13:46:16 +00:00Commented Feb 12, 2021 at 13:46
Add a comment
|
1 Answer
I gather this is your first time using css :)
Using an html selector (like div or h1) will target every element of that type. Targeting a class will target every element containing that class, and targeting an id will target the one element of that id.
Read more about selectors here: https://www.w3schools.com/cssref/css_selectors.asp
3 Comments
Murad Petrosyan
I think u misunderstood me, I mean that if in home.css file I give e100px to h1, in all other child h1 will become 100px
Murad Petrosyan
But I want home.css to work only in home.js not on all files
Robin
The way to accomplish this would be to import home.css in home.js and never extend home.js and never have other elements on the page. However, that's not a true solution because of the way selectors work. If you end up having more displayed on your page than just home.js (like you have subcomponents) any CSS will get applied to those. You will have to utilize classes and proper inheritance in the long run