Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Basic

CSS element+element Selector

Posted in CSS Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 8 - Views
⏳ 4 mins
💬 1 Comment
CSS element+element Selector

Photo Credit to CodeToFun

🙋 Introduction

The element+element selector in CSS, also known as the adjacent sibling selector, is used to select an element that is directly preceded by a specified element.

This selector is useful for styling elements that are positioned next to each other in the document structure, allowing for targeted styling without affecting other similar elements.

💡 Syntax

The signature of the element+element Selector is as follows:

Syntax
Copied
Copy To Clipboard
element1 + element2 {
    /* CSS properties */
}

In this syntax, element1 is the first element, and element2 is the adjacent element that will be styled if it immediately follows element1.

📝 Example

Here is an example of how to use the element+element selector in CSS:

☠️ HTML

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS element+element Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>Section Title</h2>
    <p>This paragraph is adjacent to the heading.</p>
    <p>This paragraph is not adjacent to the heading.</p>
</body>
</html>

🎨 CSS

CSS
Copied
Copy To Clipboard
h2 + p {
    color: blue;
    font-weight: bold;
    margin-top: 0;
}

In this example:

  • The paragraph immediately following the <h2> heading will be styled with blue text and bold font weight.
  • Any other paragraphs that do not directly follow an <h2> will not be affected.

💬 Usage Tips

  • The adjacent sibling selector only targets the first sibling that follows the specified element. If you need to select all following siblings, consider using the general sibling selector (element ~ element).
  • Combine element+element with other selectors for more specific targeting, such as classes or IDs (e.g., .class1 + h2).

⚠️ Common Pitfalls

  • Ensure that there is no whitespace or other elements between the two elements for the selector to work. The selector will not match if there are intervening elements.
  • Be mindful of browser compatibility, though most modern browsers support this selector without issues.

🎉 Conclusion

The element+element selector is a powerful and efficient way to style elements based on their adjacent relationship in the DOM.

By utilizing this selector, you can create more dynamic and visually appealing layouts while maintaining a clean and organized CSS structure. This selector is an essential tool for web developers looking to enhance their styling techniques.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy