Child element selector

Parent > child {}

The child element selector concatenates two elements with the > character, and the two elements are strictly parent-child.

Example:

<div class="parent"> <p class="child"> I am a child element. Child </p> <p class="child"> I am a child element Child </p> </div> </div>Copy the code
.parent > .child {
  color: #f23;
}Copy the code

Descendant element selector

Parent child {}

The descendant element selector connects two elements with a space. The child element can be a child of the parent element, a grandchild, a great-grandchild, a great-grandchild…

Example:

<div class="parent"> <p class="child"> I am a child element. Child </p> <p class="child"> I am a child element Child </p> </div> </div>Copy the code
.parent  .child {
  color: #f23;
}Copy the code

Universal sibling selector

Prev ~ nextAll {}

By connecting two sibling elements with the ~ character, a nextAll element is all sibling siblings after prev.

This selector we use very little, but it is actually quite powerful, in the incredible pure CSS navigation bar underline following effect in this article, the implementation of the core is actually the use of universal sibling selector ~.

There are many more ways to simplify the implementation of the effect. For example, we want to implement a tab-switch effect like this:

Usually the immediate thought is to use JavaScript entirely, get tabs buttons, get sliders, judge by index, write animations, and determine the direction…… It’s hard to think about, but with the ~ selector, our JavaScript code is drastically reduced.

I will combine the effect to analyze the code one by one, all up, you see:

<div id="box"> <div class="tab-list"> <div class="tab-item tab-item-active"> <div class="tab-item"> tag 3 </div> <div class="tab-item"> tag 4 </div> <div class="swiper-list"> <div class="swiper-item" </div> <div class="swiper-item bg-red"> </div> <div class="swiper-item bg-yellow"> </div> <div class="swiper-item bg-red" <div class="swiper-item bg-green"> </div> </div>Copy the code
#box { width: 600px; height: 400px; border: 1px solid #ccc; } /* tab-list {display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; } .tab-item { flex: 1; text-align: center; line-height: 50px; cursor: pointer; } .tab-item:hover { background-color: #3f3; } .tab-item-active { background-color: #3f3; Swiper-list {box-sizing: border-box; position: relative; width: 600px; height: 349px; overflow: hidden; } /* The following three style rules are the core of this effect */. Swiper-item {position: absolute; left: -100%; width: inherit; height: inherit; transition: all .3s; } .swiper-item-active { left: 0; } .swiper-item-active ~ .swiper-item { left: 100%; } /* Slide the content of the background color */.bg-red {background-color: red; } .bg-yellow { background-color: yellow; } .bg-blue { background-color: blue; } .bg-green { background-color: green; }Copy the code
const tabItem = document.querySelectorAll('.tab-item');
const swiperItem = document.querySelectorAll('.swiper-item');
tabItem.forEach((item, index) => {
  item.onclick = function () {
    const tabActive = document.querySelector('.tab-item-active');
    tabActive.classList.remove('tab-item-active')
    item.classList.add('tab-item-active');
    
    const swiperActive = document.querySelector('.swiper-item-active');
    swiperActive.classList.remove('swiper-item-active')
    swiperItem[index].classList.add('swiper-item-active')
  }
})Copy the code

You’re probably like me, and you don’t use JS where you can, so for the above situation, can you not write a line of JS? It’s not impossible.

Adjacent sibling selectors

Prev + next {}

By connecting two sibling elements with the + sign, the next element is the sibling of prev.

Pseudo class selector :checked

Input :checked {}

Represents the selected radio, checkbox, select element.

Combining these two selectors, we modify the above code:

<div id="box"> <! Radio --> <div class="tab-list"> <label class="tab-item-label" for="item-radio-1"> </label> <label Class ="tab-item-label" for="item-radio-2"> <label class="tab-item-label" for="item-radio-3"> </label> <label class="tab-item-label" for="item-radio-4" </label> </div> <div class="swiper-list"> <input type="radio" name="item-radio" class="item-radio" id="item-radio-1" checked> <div class="swiper-item swiper-item-active </div> <input type="radio" name="item-radio" class="item-radio" id="item-radio-2"> <div class=" item-radio-2 </div> <input type="radio" name="item-radio" class="item-radio" id="item-radio-3"> <div </div> <input type="radio" name="item-radio" class="item-radio" id="item-radio-4"> <div </div> </div> </div>Copy the code
#box { width: 600px; height: 400px; border: 1px solid #ccc; } /* tab-list {display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; } .tab-item-label { position: relative; flex: 1; text-align: center; line-height: 50px; cursor: pointer; } .tab-item-label:hover { background-color: #3f3; Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); position: relative; width: 600px; height: 349px; overflow: hidden; } .swiper-item { position: absolute; left: -100%; width: inherit; height: inherit; transition: all .3s; } /* Hide the input element */. Item-radio {display: none; } /* Click the label element corresponding to the selected input. Swiper-item */.item-radio:checked +. Swiper-item {left: 0; Swiper-item */.item-radio:checked +. Swiper-item ~. Swiper-item {left: 100%; } /* Slide content background color */.bg-red {background-color: red; } .bg-yellow { background-color: yellow; } .bg-blue { background-color: blue; } .bg-green { background-color: green; }Copy the code

The effect is as follows:

However, there is a defect here, that is, the TAB TAB button does not achieve the selected effect, I have not yet thought of a good way, we can put our heads together, if there is a good way to achieve, please be sure to tell you in the comments, thank you!

conclusion

I have written two articles on CSS selectors, but not all of them, and I have no intention of copying the spec all at once. There are only a few confusing selectors and a few powerful ones that I’ve found to be used sparingly for the time being, and more may be added in the future, especially for pseudo-class selectors and pseudo-elements.

For novice can draw inferinferies, for Daniel, as a good, hope to see you more practical CSS selector skills.