CSS Basic/Descendant/Child Selector

CSS Basic/Descendant/Child Selector

January 10, 2020
Frontend, Web
★ Star me on GitHub

These are different effects using class-one and class-two:


/* Intersection of basic selectors */
.class-one.class-two {
  background-color: grey;
}

/* descendant */
.class-one .class-two {
  background-color: brown;
}

/* child */
.class-one > .class-two {
  background-color: orange;
}

div with width: 100px and height: 100px;:

<div class="class-one class-two"></div>


<div class="class-one"><div><div class="class-two"></div></div></div>


<div class="class-one"><div class="class-two"></div></div>