How to use CSS pseudo-elements to control the style of several consecutive elements

When using CSS pseudo-elements to control elements, you often need to change the styles of some elements. There are many blogs on the Internet that talk about how to control the change of one element, but in the actual writing process, I found that more often I need to control the changes of multiple consecutive elements.

Use pseudo elements to control (take :hover as an example). When the mouse stays on A, the styles of BCD... change.

A and BCD....are adjacent and of the same level, requiring A to be at the top of BCD

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>

//The corresponding CSS code of A controlling BCD. A:hover + .B{
        background-color: orange;
    }
    .A:hover + .B+ .C{
        background-color: orange;
    }
    .A:hover + .B+ .C+ .D{
        background-color: orange;
    }

If you move A to another position, the effect will not be achieved; or if you only write the control code at the bottom of the CSS, you can only control the style change of the third element, and multiple elements cannot be changed together.

A is BCD....is a father-son relationship

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>

//Corresponding CSS code.A:hover .B{
        background-color: orange;
    }
    .A:hover .B+ .C{
        background-color: orange;
    }
    .A:hover .B+ .C+ .D{
        background-color: orange;
    }

The first one is actually very easy to understand, because element+element is to control adjacent elements. Since A and CD are not directly adjacent, I will search one level at a time, first to B, because BC are adjacent, so I can start to control it, and the same goes for D.

In the second code, element element is the method by which the parent node controls the child node. A can directly control B. If you need to control C, then find B first. Since BC are adjacent, I will use the method of adjacent element control to control C. The same goes for D.

This concludes this article on how to use CSS pseudo-elements to control the styles of several consecutive elements. For more information about CSS pseudo-elements controlling elements, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!