CSS element+element Selector
The element+element selector in CSS is a sibling combinator used to style an element that is immediately preceded by another specified element. It targets the second element only if it immediately follows the first element in the document structure.
Syntax
element1 + element2 {
/* styles */
}
- element1 is the preceding element.
- element2 is the element to style, but only if it comes directly after element1.
1. Styling Text After a Heading
Apply a unique style to the first paragraph immediately following a heading.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h2+p {
color: blue;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>Heading</h2>
<p>This paragraph will be styled.</p>
<p>This paragraph will not.</p>
</body>
</html>
<!--Driver Code Ends-->
2. Highlighting Immediate List Items
Style the first list item following another list item differently.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.one+li {
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul>
<li class="one">Item 1</li>
<li>Item 2 (styled differently)</li>
<li>Item 3</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
3. Spacing Between Adjacent Sections
Add extra margin only to the section that directly follows another section.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
section+section {
padding: 20px;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<section>First section</section>
<section>Second section (with extra margin)</section>
</body>
</html>
<!--Driver Code Ends-->
4. Formatting Elements in a Form
Target the first input field that follows a label for better form styling.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
label:focus + input {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="name" tabindex="0">Name:</label>
<input id="name" type="text" />
<input type="submit" value="Submit" />
</body>
</html>
<!--Driver Code Ends-->
5. Customizing Buttons After a Paragraph
Style buttons differently when they immediately follow a paragraph.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p+button {
background-color: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Click below to proceed:</p>
<button>Proceed</button>
</body>
</html>
<!--Driver Code Ends-->
6. Improving Accessibility Indicators
Add special styles to icons or indicators immediately after headings for accessibility.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:active+.icon {
font-size: 1.5em;
background-color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 tabindex="0">Main Title</h1>
<span class="icon">🔊</span>
</body>
</html>
<!--Driver Code Ends-->
7. Styling respective inputs for their labels
Every label is linked to a relative input field to style the input fields for respective label's the + (adjacent sibling selector) can be used.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
label:active+input {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="name" class="one">Label for input-1:</label>
<input type="text" id="name">
<br>
<br>
<label for="classes" class="one">Label for input-2:</label>
<input type="text" id="classes">
<br>
<br>
<label for="gender" class="one">Label for input-3:</label>
<input type="text" id="gender">
</body>
</html>
<!--Driver Code Ends-->
