The adjacent sibling selector is an often forgotten, but useful selector. In this video, I will demonstrate the selector’s syntax and how it works, with a real-world example.
This video is taken from my course “CSS Selectors: Getting Started” on Learnable.com.
Over a series of five lessons in that course, you will gradually build a CSS layout using 15 different types of selectors. You’ll gain an understanding of how these different selectors work, as well as how powerful CSS selectors can be. The course is for CSS beginners, and those who want to brush up on their selector knowledge.
[youtube UKtV3dw6H1s?rel=0]
Frequently Asked Questions about CSS Adjacent Sibling Selector
What is the CSS Adjacent Sibling Selector and how does it work?
The CSS Adjacent Sibling Selector is a combinator in CSS that allows you to select and style an element that is directly after another specific element, both being children of the same parent element. It is represented by the plus sign (+). For instance, if you have two paragraphs in your HTML and you want to style the second one differently, you can use the adjacent sibling selector. The syntax would look like this: p + p {color: blue;}. This means that the second paragraph (the one directly following another paragraph) will have blue text.
How does the CSS Adjacent Sibling Selector differ from the General Sibling Selector?
The main difference between the CSS Adjacent Sibling Selector and the General Sibling Selector lies in their specificity. The Adjacent Sibling Selector only selects the element that is immediately following the first element, while the General Sibling Selector selects all elements that follow the first one. The General Sibling Selector is represented by the tilde (~) symbol.
Can I use the CSS Adjacent Sibling Selector with different types of elements?
Yes, the CSS Adjacent Sibling Selector can be used with different types of elements, not just with the same type. For example, if you have a div element followed by a paragraph, you can select the paragraph using the syntax: div + p {color: red;}. This will apply the style to the paragraph that directly follows a div.
Is the CSS Adjacent Sibling Selector supported by all browsers?
The CSS Adjacent Sibling Selector is widely supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not work properly in older versions of Internet Explorer (IE 6 and below).
Can I chain multiple CSS Adjacent Sibling Selectors together?
Yes, you can chain multiple CSS Adjacent Sibling Selectors together to select an element that is a specific number of elements away. For example, the syntax p + p + p {color: green;} will select the third paragraph in a series of adjacent paragraphs and apply the style to it.
Can I use the CSS Adjacent Sibling Selector with pseudo-classes?
Yes, the CSS Adjacent Sibling Selector can be used in conjunction with pseudo-classes. For example, you can select the first paragraph that directly follows a div and change its color when it’s hovered over with the syntax: div + p:hover {color: purple;}.
Can I use the CSS Adjacent Sibling Selector to select multiple adjacent elements?
No, the CSS Adjacent Sibling Selector only selects one element that directly follows another. If you want to select multiple adjacent elements, you would need to use the General Sibling Selector.
Can I use the CSS Adjacent Sibling Selector to select a previous sibling?
No, the CSS Adjacent Sibling Selector only selects an element that follows another. There is currently no CSS selector that can select a previous sibling.
Can I use the CSS Adjacent Sibling Selector with classes and IDs?
Yes, you can use the CSS Adjacent Sibling Selector with classes and IDs. For example, the syntax .class1 + .class2 {color: orange;} will select the element with the class “class2” that directly follows an element with the class “class1”.
Can I use the CSS Adjacent Sibling Selector in media queries?
Yes, you can use the CSS Adjacent Sibling Selector within media queries. This can be useful for applying different styles to elements based on the viewport size or device type.
Russ Weakley is a world-renowned author, speaker and CSS expert, with a detailed knowledge of web design and development. Russ produced a series of widely acclaimed Sitepoint tutorials on CSS. He is currently touring a series of Responsive Web Design workshops around Australia.
Published in
·Cloud·CMS & Frameworks·Miscellaneous·Patterns & Practices·PHP·Programming·Web·May 21, 2014
