Toeuwer3 Toeuwer3 - 2 months ago 6
CSS Question

Bootstrap CSS usage of id tag

How can I make this code only work if id equals to myCarousel ? Im using bootstrap by the way.

I tried adding #myCarousel tag, but it didnt work.

.carousel {
margin-top: -20px;
height: 675px;
margin-bottom: 70px;
}

.carousel-caption {
z-index: 10;
height: 350px;
}

.carousel .item {
height: 675px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 675px;
}

Answer

Assuming the carousel has both the id myCarousel and the class carousel you can just combine them without any space between them:

#myCarousel.carousel {
  ...
}

#myCarousel.carousel-caption {
  ...
}

#myCarousel.carousel .item {
  ...
}
#myCarousel .carousel-inner > .item > img {
  ...
}

For the last one (.carousel-inner) I assumed it's a child of #myCarousel, so there's a space between them.

For more information about this see https://css-tricks.com/multiple-class-id-selectors/