Question 261756 in Html Question posted in
Some basic documentation can be found here.

Html – Can I apply an entire style sheet to just one div?

I want to use a dynamic bootstrap calendar in a website I am building. I have a style sheet for my site, but the calendar has its own styles, and no matter what I do something from one sheet ruins the other elements (my header is ruined by the calendar stylesheet, and the calendar becomes wonky and asymmetrical because of my stylesheet.)

I tried putting a class in a class (below) and giving that class to a div and putting the calendar code inside it but it did not work.

.calendar_content{
sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent; }
  a:hover {
    color: #0056b3;
    text-decoration: underline; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }
  a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none; }
  a:not([href]):not([tabindex]):focus {
    outline: 0; }

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em; }

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto; }
}

<div class="calendar_content"> Calendar code </div>

I also tried using id (below) but it didn’t work either.

CSS: #calendar_content{the entire stylesheet content}
HTML: <div id="calendar_content"> Calendar code </div>

Additional info: there are js files involved but I don’t believe it’s affecting the view of the site.

Tags:

2

Answers


  1. 0

    if you are using react/nextjs you just import the css file in the calendar component as module

    import cssFileName.module.css

    if you are using native html/css , you will need to use sass/scss/less to be able to use syntax like class nesting ex:

    .class1{
   .class2{
      color: white;
    }
}
    Login or Signup to reply.
  2. 0

    While you can by prefixing each CSS rule to support situations that do not support the nested CSS or avoid SCSS or SASS etc. this can get ugly.

    .calendar_content sub {
  bottom: -.25em;
}

.calendar_content sup {
  top: -.5em;
}

.calendar_content a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

.calendar_content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.calendar_content a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

.calendar_content a:not([href]):not([tabindex]):hover,
.calendar_content a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

.calendar_content a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.calendar_content pre,
.calendar_content code,
.calendar_content kbd,
.calendar_content samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

.calendar_content pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}
    <div class="calendar_content"> Calendar code </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search