Learning CSS is an exciting time — it’s when you start seeing your pages turn from walls of plain text into a stylish and engaging website like the ones we see every day. If you’re not paying attention, however, your code can get a bit messy.
As is generally true in computer science, there are many different ways to accomplish the same thing in CSS, and some ways are more efficient than others. Depending on your approach, you could end up with front-end code that’s clean or cluttered.
For example, say you want to style all paragraphs within your page’s <main> section a certain way. You could assign each paragraph a class like .main-paragraph and target this class with styling.
This works perfectly fine, but there’s a more efficient option: nesting your CSS rules to target elements within elements. You can accomplish this with a CSS feature called a “combinator.” Knowing what CSS combinators are and how they can be applied helps make your code a bit cleaner and easier to understand, so let’s jump right in.
What are CSS combinators?
In CSS, a combinator is a symbol that relates two CSS selectors to each other in order to style elements in a certain way. Combinators allow us to apply style rules to elements based on their parent elements or sibling elements.
Types of CSS Combinators
CSS3 includes four types of combinators: the descendant combinator, the child combinator, the adjacent sibling combinator, and the general sibling combinator. Let’s review each one.
The descendant combinator is written as two selectors separated by a single space, and targets all instances of the second selector that descend from (i.e., are nested inside) the first selector.
For example, the descendant combinator #my-div p applies the associated rules to all <p> elements inside the div #my-div — see below.
The descendant combinator works well when you want to style all instances of an element within a specified section of your page. Referring back to our situation in the intro, you might want to style all <p> elements inside your <main> section one way and all other <p>s on the page a different way. In this case, you can use the descendant combinator main p.
Importantly, the descendant combinator selects every instance of an element nested inside another, including child elements, child elements of those child elements, and so on.
However, you might not always want to apply styling this deeply — this is where the child combinator comes in.
The child combinator is written as a greater-than symbol (>) placed between two CSS selectors. It targets all instances of an element that are direct descendants, or child elements, of another element. The style cascade stops after the first nesting level.
In the example below, I’ve used a descendant combinator to color all paragraph text inside <main> orange, and a child combinator to style only the child paragraphs of <main> with a larger font size. Notice how the main > p combinator does not affect the <p> inside the <div> element.
The adjacent sibling combinator is written as a plus sign (+) between two CSS selectors. It targets an element matching the second selector only if it immediately follows an element that matches the first selector. Additionally, both elements must be children of the same parent element (and are thus called “sibling elements”).
Below, see how the first paragraph receives styling because it directly follows <h1>. However, the second paragraph does not.
The general sibling selector is written as the tilde symbol (~) and targets all elements that follow a specific sibling element. Unlike the adjacent sibling selector, the targeted elements do not need to immediately follow the first element.
In this example, all <p> elements are styled because they proceed <h1> in the document, despite not all being directly adjacent to each other.
Nesting your CSS selectors is one small trick that makes things much easier down the road. You’ll write your CSS more quickly, apply style changes more efficiently, and not have to worry about remembering to place a slew of id or class attributes in the right HTML tags.
Combinators will take some practice to get right. But, before mastering CSS and moving onto a framework like Bootstrap, you should learn them — they’re a handy trick for your front-end tool belt.
Originally published Jun 28, 2021 7:00:00 AM, updated August 23 2021