CSS Selectors in Depth
Advanced CSS Selector Chaining for Improved Interaction without Javascript
Using the adjacent + and general ~ sibling combinators we can alter the appearance of sibling DOM elements. In this lesson we use this strategy to style a navigation bar to to indicate which element is selected by leveraging the radio button functionality. This allows us to create a basic interactive interface without needing Javascript.
Instructor: [00:00] Let's look at the sibling selector, which is a less common CSS selector combinator. For this example, we're going to style a navigation. This is an unordered list of radio buttons. The benefit here is that even without CSS or JavaScript, this nav is pretty functional. It easily shows which item is selected. This could be a good strategy for a single-page app navigation.
[00:19] Looking at the markup, we have list items with a class of nav-item. They contain a checkbox input. This one has a property of checked, so the page loads with this as the default selection. Then they have a corresponding label. On the end of the list, we have a login button.
[00:34] Let's go ahead and start styling this. If we look at the CSS, I have commented out some styles here. It adds a background with a linear gradient, styling the nav just basically and then styling the nav items. Also, I have commented out the styling for the login button.
[00:54] Let's go ahead and style these nav items with these radio buttons. We'll start by styling the label. I want to make these look like they're clickable, so I'm going to change the cursor to pointer. Let's add a three-pixel padding on the bottom, which we'll use for an underline in the selected state.
[01:24] These radio buttons are in the way. They're nice for functionality, but not for design. On the radio button, I'm going to start by setting the pointer events to none. That'll make it so that if you click on it, nothing happens because we're actually then going to set the position to absolute to get it out of the layout and not mess up the layout further.
[01:44] Then we're going to set the opacity to 0Then we're going to go ahead and set nav-item radio checked. We want to change the state of what happens when they're checked. I want to put a border on the bottom, which will act like an underline.
[02:01] If you can see here, this didn't do anything. That's because the radio button's hidden. I'm going to use this + symbol, which is the sibling selector, so that when it's checked, the label should have an underline.
[02:14] That's useful when the sibling is right after the initial selector, but if you have, like in this instance, where I've got a span in between, you can see that the pricing doesn't get its underline.
[02:28] If I change this from a + symbol to a ~, what that'll give me is a general sibling selector. It doesn't have to be right after. There's a word of caution here, is that order is important.
[02:41] I cannot select a sibling that comes before the first half of the selector. Doesn't work that way. Cascading styles only work in one direction. It has to be a sibling that follows after the initial element.
[02:58] That's the sibling selector. If you use it correctly, there's not a ton of use cases for it, but when you really need it, it comes in very handy.