Selectors can be used to target elements in many different ways. In this video, learn how to get more specific with combinator selectors.
- [Narrator] Combinators are selectors that are combined in various ways to make more specific selections based on the HTML structure. Let's start with a review of descendant selectors. Descendant selectors are based on the relationship between nested HTML tags. A child element is directly nested within the parent tag. A descendant element can be nested any number of levels within another tag. Descendant selectors applies to any nested element, not just the parent-child relationship.
In CSS, the syntax is defined by using a space between the selector names. If you're targeting an element that is nested within several tags, you don't have to follow the exact structure. You can skip a couple levels depending on how specific you need to be. In this example, let's look at a few ways to select a link within the section tag. Section with a class of example pa is too specific. The more levels you go, the more complex the matching pattern is, and this style will only apply if all these conditions are met.
The second option, a class of example and a is still too specific because if a link is added outside of the example div, but inside of the section element, it will not be selected. In this case, section a would be the best option. You can also mix different selector types when using descendant selectors, as long as it matches the markup in the HTML structure. Child combinators can be used to select only the child element, using the greater than symbol between the elements.
The spaces before or after the greater than symbol are not required, and does not affect the child combinators, but I personally like to add it for readability. The parent element is on the left and the child element is on the right. Let's look at a quick example. The selector, section a, will target all the links. Let's add that style back in and run it. Now, all the links are red, but if I use a child combinator by adding the greater than symbol and using a child combinator, it will only select its child elements, not the descendants.
Let's add this style back in. And, as you can see, it's only changing the color of its immediate child elements, and not its descendant element. You can also use combinators to target sibling elements in two ways. The plus symbol selects only the adjacent sibling. The selector on the right is the sibling element to be matched. In this example, it will only apply to paragraph two. Paragraph one is not selected because it appears before the h2 in the HTML.
If you use the tilde symbol, this will match any sibling element following the selector on the left. Let's apply this to an example. Let's say I want to add a style to the first paragraph. If I use p as my selector, it will add a style to all of the paragraphs. And that's not what I'm looking to do. I do want to just target the first paragraph, so, what I can do instead is use a class.
If I add a class to the first paragraph I can apply a style directly to it. This option works just fine, but I can also use a combinator selector, the adjacent sibling. If I use the selector h1 + p then this will select only the paragraph following the h1. Using this combinator targets a very specific pattern.
It has to be a paragraph tag following an h1 tag. If I add any element that's not a paragraph after the h1 the pattern no longer matches. So, let's say I added an h2 heading here. The sibling combinator no longer works, but the class still does because its independent of its HTML structure. If I use a general sibling combinator with the tilde instead, this will select any sibling paragraph after the h1.
This general sibling selector is not as specific as the adjacent sibling. As you can see, it still applies the color to the paragraphs. Grouping multiple selectors separated with a comma is another combination that can be used to target multiple selectors at the same time. You can also mix different types of selectors when grouping them. The spaces are optional but the comma is not. For longer selector names, I often put them on their own lines just for readability.
In a previous lesson, we talked about using multiple classes. If you combine the two class selectors with no space, this will match only if both classes are present in the same HTML element. Other types of selectors can be combined as well. For example, if I wanted to apply a style specific to the class and the element, I can combine a type and class together with no space. That's the important part. Adding the space will mean it's a descendant selector.
And here's an example with an id selector. Let's go over one more example to see how combining selectors can come in handy. Classes are often created for creating common components that are reused throughout a project, like buttons. Let me go ahead and add this whole block of CSS back in. This button class includes all of the characteristics that the component should have. So, whether it's added to a span take or an input, they share the same styles.
But let's say you want slightly different styles for different types of buttons. Classes are often created for common components that are reused throughout the project, like buttons. This button class includes all of the characteristics that the component should have. So, whether it's added to a span take or an input, they share the same styles. But let's say we wanted to change the background color for each button based on a specific requirement. For example, we may want a different background color for a submit button and another color for a cancel button.
Let's try that out. Let's add a second class to our span button and make it our submit button. And the input can be a cancel button. Then, in the CSS, we'll combine the selectors to add the styles specific to that combination. So, for the submit button I can use both the btn class and the submit class and give it a different color.
And that way, this style will only be applied to elements that have both the button and the submit class. We can do that for our cancel button as well. Now you can use one shared class for all the shared characteristics, and add a second class and combine the selectors to create specific styles for specific scenarios. Sometimes there isn't an exact right or wrong way to do something in CSS, but knowing how to use these different tools and selectors can help you figure out which one will work best for each scenario.
Just try to choose the most efficient and flexible solution.
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts