What is syntax for selector in CSS for next element?

html

css

selectors

web-development

byAnton Shumikhin·Aug 13, 2024

To apply styles to an element immediately following another, use the + adjacent sibling combinator in CSS.

/* If <p> tags bump into their friendly neighbor <h2> give them a shade of blue */
h2 + p {
  color: blue;
}

This targets a  tag located right after an <h2>. Both the elements are on the same hierarchy level without any element coming in between them.

Exploring sibling selectors in CSS

Distinguishing between adjacent and general sibling selectors

In CSS, sibling selectors are classified into adjacent (+) and general (~). The + combinator is used to target a specific tag that directly follows an element. On the contrary, the ~ combinator styles all tags following a certain element within the same parent.

For instance:

/* Good old adjacent sibling selector is eyeing for the next <p> after <h1> */
h1.hc-reform + p {
  clear: both; /* Clears any float styles and stops the party*/
}

/* General sibling selector is watching over all the younger <p> siblings */
h1.hc-reform ~ p {
  margin-top: 20px; /* Space. The final frontier. */
}

A walk down the memory lane: older browser support

The + combinator doesn't get along with IE6 or older. For these browsers, class-based selectors or JavaScript could be an alternative. CSS specificity can also come into play as other styles might override these selectors.

Know when to say No to `+`

Using + combinators isn't always the best choice. For selecting nested elements within a parent, the > child combinator would be more suitable.

For instance:

/* Uncle <div> proudly presents his child <p> */
div > p {
  font-weight: bold; /* Make a bold statement */
}

Navigating through dynamic elements

When dealing with dynamic content where the document's structure might change, ensure that your adjacent sibling selectors still reference the correct elements. JavaScript manipulation of DOM elements can affect your CSS selectors. Therefore, testing is crucial.

Common pitfalls and solutions

Conflicting styles

Specificity in CSS defines priority of your styles. It can affect if your adjacent sibling selectors work as intended. A higher specificity elsewhere may override + combinator's styling. To resolve it, increase the specificity of your selector or refactor conflicting styles.

Misinterpretation of parent-child and sibling relation

A common mistake is confusing the + combinator with the child selectors (>). Adjacent sibling combinators target the next sibling, not the children of the targeted element. Always double-check your HTML structure before deciding on using + or >.

Practical perspectives and tips

Taking the structure into account

Before using the + combinator, scrutinize your HTML structure. Clear understanding of the HTML design will bail out any confusion between needing a child (>) or adjacent sibling (+) selector, or if the general sibling (~) combinator would get the job done.

Marching towards modernity

In modern times with little to no need for legacy browser support, using the + combinator can be a potent tool for keeping your code clean and simple.

Play around with pseudo-classes

Combine the + combinator with pseudo-classes for dynamic styling. For example, :hover can alter the style of the next element when the primary element is hovered over:

button:hover + .tooltip {
  visibility: visible; /* Play peekaboo with .tooltip */
}

This can create interactive UI elements with less dependence on additional JavaScript.

Mind the checks and balances

Ensure to validate your HTML and CSS with resources like W3C's Markup Validation Service and W3C CSS Validation Service. Regular validation makes sure your selectors do their job as expected.