How to use a different CSS file for a specific div class?

Question

I have an HTML file which is already linked to a CSS file, I just added a slider feature to it here's the code for the slider feature:

body {
  width: 100%;
  margin: 0 auto;
  color: #fff;
  font-size: 1.75vw;
}

body * {
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 100;
}

h1 {
  font-size: 6vw;
  text-transform: uppercase;
  font-weight: normal;
}

ul,
li {
  list-style: none;
}

label {
  cursor: pointer;
}

input {
  display: none;
}

.slider {
  height: 25vw;
  overflow: hidden;
}

.slider>ul {
  height: 100%;
  z-index: 100;
}

.slider>ul>li {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  transition: all 2000ms ease;
}

.slider>#input-slide-0:checked~ul>li.slide-0,
.slider>#input-slide-1:checked~ul>li.slide-1,
.slider>#input-slide-2:checked~ul>li.slide-2,
.slider>#input-slide-3:checked~ul>li.slide-3 {
  opacity: 1;
  z-index: 2;
}

.slider>ul>li.slide-0 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-1 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-2 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-3 {
  background-color: #47d7ed;
}

.slider>.slider-dot {
  position: relative;
  margin-top: -4vw;
  text-align: center;
  z-index: 300;
  font-size: 0;
}

.slider>.slider-dot>label {
  position: relative;
  display: inline-block;
  margin: 1vw 0.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: #fff;
}

.slider>#input-slide-0:checked~.slider-dot>label.slide-0,
.slider>#input-slide-1:checked~.slider-dot>label.slide-1,
.slider>#input-slide-2:checked~.slider-dot>label.slide-2,
.slider>#input-slide-3:checked~.slider-dot>label.slide-3 {
  background-color: black;
}

.slider>.slider-dot>label:hover {
  background-color: #f73c3f !important;
}

.slider>.slide-description {
  position: absolute;
  width: 50%;
  top: calc(35% - 3vw);
  left: 25%;
  z-index: 200;
}

.slider>.slide-description>label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease;
}

.slider>#input-slide-0:checked~.slide-description>.slide-0,
.slider>#input-slide-1:checked~.slide-description>.slide-1,
.slider>#input-slide-2:checked~.slide-description>.slide-2,
.slider>#input-slide-3:checked~.slide-description>.slide-3 {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.slider>.slide-description>label>.text-slide {
  margin: 0 auto;
  line-height: 6vw;
  top: 0px;
}

@keyframes slide {
  0%,
  100% {
    opacity: 0;
  }
  6%,
  25% {
    opacity: 1;
    z-index: 2;
  }
  30%,
  50% {
    opacity: 0;
    z-index: 2;
  }
}

.slider>#input-slide-autoplay:checked~ul>li.slide-0 {
  animation: slide 32000ms infinite -2000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-1 {
  animation: slide 32000ms infinite 6000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-2 {
  animation: slide 32000ms infinite 14000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-3 {
  animation: slide 32000ms infinite 22000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li {
  transition: none;
}

@keyframes arrow {
  0%,
  24% {
    z-index: 1;
  }
  25%,
  100% {
    z-index: -1;
  }
}

@keyframes dot {
  0%,
  24% {
    background-color: #333;
  }
  25%,
  100% {
    background: #fff;
  }
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-0 {
  animation: dot 32000ms infinite -2000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-1 {
  animation: dot 32000ms infinite 6000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-2 {
  animation: dot 32000ms infinite 14000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-3 {
  animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
  0%,
  5% {
    opacity: 0;
    z-index: 2;
    visibility: visible;
  }
  6%,
  24% {
    opacity: 1;
    z-index: 2;
    visibility: visible;
  }
  25%,
  100% {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
  }
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-0 {
  animation: description 32000ms infinite -2000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-1 {
  animation: description 32000ms infinite 6000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-2 {
  animation: description 32000ms infinite 14000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-3 {
  animation: description 32000ms infinite 22000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>label {
  transition: none;
}

.readmorebutton {
  padding: 1px;
  color: #fff;
  background-color: #C10E0E;
  display: inline-block;
  margin: 4px 0;
  text-decoration: none;
  border-radius: 3px;
  width: 120px;
}

<div class="slider">
  <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
  <ul>
    <li class="slide-0"></li>
    <li class="slide-1"></li>
    <li class="slide-2"></li>
    <li class="slide-3"></li>
  </ul>
  <div class="slide-description">
    <label class="slide-0">
                    <h1 class="text-slide">Lorem Ipsum</h1>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
                    <a href="/" class="readmorebutton">Read More</a>
                </label>
    <label class="slide-1">
                    <h1 class="text-slide">CSS SLIDER #2</h1>
                </label>
    <label class="slide-2">
                    <h1 class="text-slide">CSS SLIDER #3</h1>
                </label>
    <label class="slide-3">
                    <h1 class="text-slide">CSS SLIDER #4</h1>
                </label>
  </div>
  <div class="slider-dot">
    <label class="slide-0" for="input-slide-0"></label>
    <label class="slide-1" for="input-slide-1"></label>
    <label class="slide-2" for="input-slide-2"></label>
    <label class="slide-3" for="input-slide-3"></label>
  </div>
</div>

Now after I linked my external CSS file to my main HTML file, everything got messed up as now I have two CSS file both of them has many things common. So is there any way I can solve this problem. Also can I link an external CSS file or particular CSS code only to a specific div section in my HTML code.

Does this answer your question? [Limit scope of external css to only a specific element?](https://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element) — Umutambyi Gad, Aug 20 '20 at 16:26

score 1 · Answer 1 · edited Aug 30 '20 at 15:53

You didn't specify if you want to replace the first CSS file's rules with these new rules or overwrite the old rules.

I'm guessing you want to overwrite the rules on the page with this HTML.

To overwrite the rules add the new css file after the first one (on the page with the slider).

<link rel="stylesheet" type="text/css" href="fileOne.css" >
<link rel="stylesheet" type="text/css" href="fileTwo.css" >

This will cause browsers to use the second css files, instead of the first files, when there is a conflict.

Alternatively, if this is the only page that will need these CSS rules you can include a STYLE tag on the page, and place your rules inside those tags.

You could try wrapping your slider div inside another then change your CSS rules (adding a "wrapper" is usually frowned on from CSS / HTML standards people.).

<div id="sliderWrapper">
<div class="slider">...</div>
</div>

#sliderWrapper .slider { your rule here}

But you'd need to add the "#sliderWrapper" rule before all the CSS rules for the slider.

score 0 · Answer 2 · answered Aug 20 '20 at 16:23

0

You can use multiple css files but you can't apply particular css file to the specific div or element.If you have to apply specific styles to specific div or element then you can use "id" or "class".

answered Aug 20 '20 at 16:23

Dharmik Patel

1,041
6
12

How to use a different CSS file for a specific div class?

2 Answers2