In CSS or front-end development, selecting elements of the same level can be achieved through sibling selectors. 1. Use the adjacent brother selector ( ) to select the next brother element next to a certain element. For example, h2 p only applies styles to p immediately following h2, which is suitable for highlighting the first paragraph of text or form item under the title; 2. Use the general brother selector ( ~ ) to affect all subsequent brother elements that meet the conditions, such as input:checked ~ label to turn all subsequent labels green, suitable for controlling the display of tab content or implementing the collapsed panel; 3. In JavaScript, element.nextElementSibling and element.previousElementSibling can obtain adjacent brother nodes, and combine it with a loop to traverse all brother nodes for dynamic operation of elements; 4. Although CSS does not have the reverse brother selection function, similar effects can be indirectly achieved through the order attribute of Flex layout and other techniques.

In CSS or front-end development, selecting sibling elements is actually a very common requirement, such as you want to style the following or adjacent sibling elements. At this time, you need to use the brother selector.

Use the adjacent brother selector ( )

This is the most basic way to select the next brother element next to an element.

For example:

 h2 p {
  color: red;
}

The meaning of this code is: all p elements following h2 's text color turns red. Note that only the brother element that follows will be selected, and the others will not take effect.

Applicable scenarios:

• Want to highlight the first paragraph below the title.
• The prompt copy after an item in the form requires a special style.

Use the Universal Brother Selector (~)

If you want not just the next brother, but all subsequent brother elements that meet certain criteria to apply styles, then you have to use this.

Examples are as follows:

 input:checked ~ label {
  color: green;
}

The meaning of this code is: When an input is selected, all label brothers after it will become green fonts.

Applicable scenarios:

• When switching tabs (tabs), control the display of the corresponding content area.
• Implements a drop-down menu or a folding panel that is pure CSS.

How to operate sibling nodes in JavaScript?

Sometimes CSS alone is not flexible enough, you need to use JS to obtain and manipulate sibling elements.

Common methods are:

• element.nextElementSibling — Get the next sibling node (only look at element nodes, ignore text, comments, etc.).
• element.previousElementSibling — Get the previous sibling node.
• To traverse all sibling nodes, you can re-circulate them in combination with parent.children to re-circulate.

Example:

 const current = document.querySelector('.active');
const next = current.nextElementSibling;

if (next) {
  next.classList.add('highlight');
}

This way you can dynamically operate the sibling nodes of the current element.

Tips: You can also select brothers in CSS

While CSS doesn't have a "Brothers in the Front" selector, you can use some layout tips to achieve similar effects. For example, when using Flex layout, you can change the visual order by setting order attribute, or achieve the purpose by linking pseudo-classes and states.

To sum up, the key to choosing sibling elements is to understand the scope of action of different selectors and choose the appropriate writing method according to the specific scenario. Basically all is it, not complicated but it is easy to ignore details.

The above is the detailed content of How do you select sibling elements?. For more information, please follow other related articles on the PHP Chinese website!