CSS Techniques for Selecting the Previous Element

Certain styling may need to be applied to a preceding element in CSS. This article aims to clarify whether such an effect is attainable. A previous element selector or previous sibling selector does not exist in CSS’s current selector list. Yet, a workaround is feasible through the utilization of the flex property. A frequent scenario involves a label paired with an input. Upon the input’s :hover or :focus state, the goal might be to highlight the accompanying label, which, in this instance, precedes the input.

Exploring CSS techniques for selecting the previous element provides a foundation for understanding more advanced styling tricks, such as creating custom underlines for links, which further enhance web design.

Working with Labels and Inputs

• A common scenario would be having a label and an input element;
• The objective is to emphasize the label when the input element is either hovered over or focused;
• Here, the label comes before the input element in the document flow.

Consider the following HTML structure:

<div class="field">
  <label class="label" for="email">E-mail:</label>
  <input class="input" type="email" id="email">
</div>
<div class="field">
  <label class="label" for="email">E-mail:</label>
  <input class="input" type="email" id="email">
</div>

Customizing HTML Structure

A workable solution involves modifying the HTML structure. The aim is to swap the positions of the input and label elements. This allows us to target the label element using the sibling selector (+).

The revised HTML is as below:

<div class="field">
  <input class="input" type="email" id="email">
  <label class="label" for="email">E-mail:</label>
</div>

Styling with Flex-Direction

Once the HTML structure is in place, we can use CSS to determine the visual order of the label and input elements. This is where the flex-direction: row-reverse rule comes in handy.

The accompanying CSS looks like this:

.field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end; /* to pull content to the left */
}

.input:focus + .label {
  color: #5a6cce;
}

Optimizing Multiple Elements with Order Property

If your container has more than two elements, you can give each one an order property for visual placement. If you do this, remember to remove the flex-direction: reverse on the container element.

.label {
  order: 1;
}

.input {
  order: 2;
}

Leveraging :focus-within Pseudo-Class

If you’re working with inputs and the :focus state, you can use the :focus-within pseudo-class to select the desired element. In this scenario, you can leave the HTML structure as before:

<div class="field">
  <label class="label" for="email">E-mail:</label>
  <input class="input" type="email" id="email">
</div>

Add the following CSS:

.field:focus-within .label {
  color: #5a6cce;
}

Conclusion

Selecting a previous element in CSS is not natively supported, which limits direct sibling selection capabilities. However, developers can simulate this behavior. This can be done by applying the flex property in reverse order or using the :focus-within pseudo-class. These techniques allow developers to indirectly style a preceding element in relation to another, providing a method to overcome the limitations of CSS selectors. Understanding these techniques is essential for complex CSS layouts and interactions.