2 css file with same classname, and the element with that classname have both style

Question

I have a css file mainPageStyle.css, with the selector logo:

.logo{
    position: absolute;
    left: 3%;
    border-radius: 5%;
}

I have another css file landingPageStyle.css, with the selector logo, but more specific:

.container .content .logo {
  width: 21em;
}
.container .content .logo img {
  width: 40%;
  height: 40%;
  border-radius: 5%
}

In my login.jsx, I import only the landingPageStyle.css and used the logo class as follow:

<div className="logo">
   <img src={myLogo} alt="login"/>
</div>

The image will apply both of the styles in the logo selector. How could this happen? I just want the logo defined in the landingPageStyle.css.

I see I could solve this issue by renaming 1 of the logo selector, or we can be more specific with the selector in css. But how can we use the same classname? Why the login.jsx can use the style in logo from mainPageStyle.css without importing?

One way to fix this is to override the properties with their default values in the more specific rule. — user5734311
– user5734311, Commented Oct 20, 2019 at 23:16

Shiny · Accepted Answer · 2019-10-20 23:36:34Z

1

CSS Styles only overwrite conflicting properties, not the whole style - that is to say, if you have conflicting styles like:

.header {
  font-size: 18px;
  color: red;
}

div.header {
  font-size: 25px;
}

Even though the div.header style is prioritized, the styles applied will be font-size: 25px; color: red

While renaming is probably the best way to handle this, you could also set the properties to their default values - It's best to check the proprieties on developer.mozilla.org to see what they should be

So, you could change your landingPageStyle.css to:

.container .content .logo {
  width: 21em;
  position: static;
  left: auto;  /* Not needed because position is static */
  border-radius: 0;
}

edited Oct 20, 2019 at 23:36

answered Oct 20, 2019 at 23:19

Shiny

5,0953 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EzyHoo Over a year ago

Yes, we can be more specific in css selector. So, if we can somehow reference the classname in the css without import it, what is the point of importing css

Shiny Over a year ago

You don't have to have the className assigned to use it in your CSS - you won't have any exceptions, and it will just apply when that class appears. Importing CSS is mostly done to keep code compartmentalized, or if you're importing a stylesheet from someone / somewhere else

bron · Accepted Answer · 2019-10-20 23:32:56Z

0

This might help. Adding !important will override other values but is not recommended.

This will ofcourse only work if landingPageStyle.css is loaded after mainPageStyle.css

.container .content .logo {
  width: 21em;
  position: static; /* or relative */
  left: auto;
  border-radius: 0;
}
.container .content .logo img {
  width: 40%;
  height: 40%;
  border-radius: 5%
}

edited Oct 20, 2019 at 23:32

answered Oct 20, 2019 at 23:27

bron

1,5681 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

2 css file with same classname, and the element with that classname have both style

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related