input:focus + label {
      color: blue;
    }

This targets the button element that is positioned immediately after the button with the class .login. It sets the styles (padding, border, etc.) specifically for the second button, creating a different visual distinction between the login and the following button.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

This targets the search input container element positioned immediately after the element with the class .button-container. It sets the search input container’s styles (width, positioning, etc.).

    .platform + li {
        position: relative;
    }

This is a slightly different use case. Here, the adjacent sibling selector targets the .search-icon *element, but only when the *.search-input element has focus (when the user clicks inside the search bar). This way, you can change the icon’s color and size to provide visual feedback to the user when interacting with the search input.

General Sibling Selector (~)

The general sibling selector, represented by the tilde symbol (~), allows you to target and style elements that share the same parent and follow a specified element. Unlike the adjacent sibling selector, which only targets the immediate sibling, the general sibling selector affects all subsequent siblings.

Syntax:

The syntax for the general sibling selector is:

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

In this syntax:

• **element1: **Represents the reference element.

• element2: Represents the target element, which follows element1 and shares the same parent.

The general sibling selector is handy when you style components related to the HTML structure but not necessarily adjacent to one another. For example, you can use it to style all paragraphs that follow an

Uses:

The general sibling selector targets all siblings of a specified element who share the same parent, regardless of their position.

• Navigation Links: Use the general sibling selector to style any navigation links that follow a highlighted link.

    element1 + element2 {
      /* CSS styles */
    }

• Styling Lists: If you want to style all list items after a specific one, use the general sibling selector.

    input:focus + label {
      color: blue;
    }

• Theming Sections: Apply a different style to all sections that follow a specific section within the same parent in a document.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Example: LambdaTest Docs Page

In the LambdaTest Docs Page example, the general sibling selector styles all elements that follow a .docs-title div within the .docs-category section. This approach helps differentiate the links from other content and creates a structured layout. It ensures that all related links are visually grouped and styled consistently, maintaining a clean and organized design.

In the above example, the CSS rule, .docs-title ~ a *targets all *anchor () elements that come after a .docs-title div. The styles used include a block display, a margin for spacing, and specific text color, size, and weight.

Understanding these two sibling selectors enables more targeted and dynamic styling on your web pages. However, are CSS sibling selectors compatible with all browsers?

Browser Compatibility

CSS sibling selectors with combinators are widely supported across modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is still good practice to check compatibility with older browser versions and to test your website on different browsers to ensure consistent behavior.

To test your website’s styles across various browsers and ensure everything functions as expected, consider using a cloud-based platform like LambdaTest. It is an AI-powered test execution platform that allows you to run manual and automated browser compatibility tests at scale across 3000 browsers and OS combinations.

Best Practices and Considerations

Using CSS sibling selectors can greatly enhance your website design. Still, following best practices and being aware of certain considerations is important to ensure your CSS stylesheets remain efficient and maintainable.

Combine Selectors for Specificity

CSS sibling selectors offer lower specificity than classes and IDs. This means that if there is a conflicting style rule with a higher specificity, the more specific rule takes precedence. Be aware of conflicts and ensure your sibling selector styles target the correct components.

Sibling selections can be combined with other CSS Selectors to improve specificity and prevent conflicts. This can prevent styles from being applied in undesired instances.

    element1 + element2 {
      /* CSS styles */
    }

Avoid Overuse of Sibling Selectors

Excessive usage of sibling selectors can make CSS more difficult to read and manage. Try simplifying and clarifying your style sheets to make them easier to understand. Consider using classes or nesting items for more sophisticated targeting scenarios.

    input:focus + label {
      color: blue;
    }

Limit Scope of Selectors

Avoid using overly broad selectors that might unintentionally style more elements than intended. For example, use .nav-item ~ .nav-item instead of div ~ div to ensure you target only the relevant elements.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Ensure Responsiveness and Compatibility

Ensuring your website appears attractive and works properly across all devices and browsers is essential. While using CSS sibling selectors in specific contexts, it is critical to prioritize responsiveness and broad compatibility.

Here are some important considerations:

• **Media Query: **Use media queries to customize your styles based on screen sizes and device orientation. This ensures that your website’s layout adapts for optimal viewing on desktops, laptops, tablets, and smartphones. To validate the responsive design across various devices and browsers, use the LT Browser offered by LambdaTest. This mobile website testing tool allows you to test your site on 53 device viewports, ensuring a consistent and positive user experience across different devices.

The CSS media query below targets styles for screens 992 pixels wide or less, typically including tablets and smartphones in portrait mode. Within this media query, you can adjust the body’s height to auto and set the height of .logo-container img to 40px, among other changes.

The code snippet below is an example of a media query that adjusts the blog posts section layout for screens 992 pixels wide or smaller. It sets .blog-image-text-container *to display as a flex container with a column direction and adjusts its width to 100%. The images inside *.blog-image-container *are styled with a width of 100% and a height of auto. Additionally, *.table-of-content *is hidden using *display: none.

Result:

The above result is shown on LT Browser to validate the responsiveness of your websites over desktop, mobile, and tablet devices.

To start using LT Browser and test the responsiveness of your application, simply click the download button below.

Watch the video below to learn more about LT Browsers and how to get started.

• Browser Compatibility: Test your website’s functionality and appearance across multiple browsers to ensure that your styles and layouts render consistently. Browsers may interpret CSS code slightly differently, so testing helps identify and address inconsistencies. As learned above, you can use LambdaTest to perform cross browser testing to validate if your websites are supported across various browsers and work as expected.

By prioritizing responsiveness and compatibility, you can build a website that provides a seamless user experience for all users, regardless of their device or browser.

Use Classes for Clarity

CSS sibling selectors are useful for targeting items based on their position in the HTML structure; however, using them excessively can result in less maintainable code. Using classes can help with code readability and long-term maintainability.

Imagine a scenario where you use a sibling selector like:

    element1 + element2 {
      /* CSS styles */
    }

This code immediately targets all elements following a

Using the CSS sibling selector here becomes less clear. What happens if you add another element between the

Using classes, you can specify the relationship between elements, making your CSS code readable and maintainable. Here’s how is how it can be done:

HTML:

    input:focus + label {
      color: blue;
    }

CSS:

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

In this example, you can include classes like .article-section, .article-title, .article-summary, etc. CSS styles now target these specific classes, making the code clearer and more understandable. Using classes improves code readability, maintainability, and reuse.

Adopting this method ensures your CSS code is maintainable as your website grows. Remember that clear and well-organized code saves time in the long run and facilitates collaboration with other developers.

Conclusion

In conclusion, sibling selectors are effective CSS features that allow developers to develop sophisticated and dynamic styles based on item relationships. This blog focuses on two types of sibling selectors: adjacent ( ) and general (~).

To demonstrate sibling selectors’ utility, we reviewed the fundamentals, included practical examples, and looked at real-world applications. In addition, we’ve emphasized best practices and considerations to keep your CSS efficient and manageable.

Understanding and properly using adjacent and general sibling selectors allows you to improve your web designs and develop more sophisticated, visually appealing layouts. To achieve the greatest results, properly test your styles and keep your code clean and well-organized.

Happy Coding!

The above is the detailed content of Understanding CSS Sibling Selectors: A Beginner's Guide. For more information, please follow other related articles on the PHP Chinese website!