How do you group selectors

Grouping Multiple CSS Selectors

Grouping CSS selectors simplifies your stylesheets

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing. The secret to this efficiency-boosting tactic is the comma.

How to Group CSS Selectors

To group CSS selectors in a style sheet, use commas to separate multiple grouped selectors in the style. In this example, the style affects the p and div elements:

In this context, a comma means «and,» so this selector applies to all paragraph elements and all division elements. If the comma were missing, the selector would instead apply to all paragraph elements that are a child of a division. That is a different kind of selector, so the comma is important.

You can group any form of selector with any other selector. This example groups a class selector with an ID selector:

This style applies to any paragraph with the class attribute of red and any element (because the kind is not specified) with an ID attribute of sub.

You can group any number of selectors, including selectors that are single words and compound selectors. This example includes four different selectors:

This CSS rule would apply to:

That last selector is a compound selector. As shown, it’s easily combined with the other selectors in this CSS rule. The rule sets the color of #f00 (red) on these four selectors, which is preferable to writing four separate selectors to achieve the same result.

Any Selector Can Be Grouped

You can place any valid selector in a group, and all elements in the document that match all the grouped elements will have the same style based on that style property.

Some designers prefer to list the grouped elements on separate lines for legibility in the code. The appearance on the website and the load speed remains the same. For example, you can combine styles separated by commas into one style property in one line of code:

or you can list the styles on individual lines for clarity:

Why Group CSS Selectors?

Grouping CSS selectors helps minimize the size of your stylesheet so it loads faster Admittedly, style sheets are not the main culprits in slow loading; CSS files are text files, so even very long CSS sheets are tiny when compared to unoptimized images. Still, every bit of optimization helps, and if you can shave some size off your CSS and load the pages that much faster, that’s a good thing.

Grouping selectors also makes site maintenance far easier. If you need to make a change, you can simply edit a single CSS rule instead of multiple ones. This approach saves time and hassle.

The bottom line: Grouping CSS selectors boosts efficiency, productivity, organization, and in some cases, even load speed.

Grouping and Nesting CSS Selectors

When you start to write bigger and bigger HTML files, and your CSS styles start to become longer and longer, it might be worth looking into if you can shorten and simplify them a bit by grouping CSS selectors and nesting CSS selectors.

Grouping CSS Selectors

The easiest way to identify where you might be able to group selectors in one line is to see where you have repetition in your styles.

For example, let’s say these are your current styles:

Instead of writing those three selectors, you can group them into a single line.

To group them, all you need to do is separate them with a comma, and the styles inside will get applied to them all. For example:

Look how much shorter that is! Now you can apply the same styles to multiple elements at once.

Nesting CSS Selectors

Just like in HTML where you can have elements nested inside other elements, the same can be done in CSS. There are cases where you might want to style elements differently depending on what they are nested inside of. This is where nesting comes in handy.

Descendant Selector

When you want to target elements that are inside another element, you can use the descendant selector, also known as the descendant selector.

Let’s say you have a paragraph tag inside your main content and also one in your footer, but you want the footer’s font size to be smaller.

You can simply target paragraph tags inside main differently than you would paragraph tags inside footer by nesting the paragraph tag inside its parent.

It’s that simple. To nest a selector, you simply separate them with a space.

But what if you had a third paragraph tag in the header, and also wanted it to be the same font size of the footer? Well, you can both group and nest CSS selectors at the same time:

This will make paragraph tags inside main have one font size, and paragraph tags inside either header or footer have another font size.

Descendant selectors target all elements inside the other, no matter how deeply nested it is.

But what if you don’t want this, and only want to target the direct children instead?

Child Selector

For the cases where you only want to target direct children (nested only one level under), you can use a child selector. Instead of using a space, you use a greater-than character to specify direct children:

Adjacent Sibling Selector

There will sometimes be cases where you want to target an element based on whether or not it came right after another element.

Let’s say you wanted the first paragraph after every h1 tag to be in a larger font size:

You can use an adjacent sibling selector to say «hey, I want to style only the paragraph tag right after my header»:

Now your first paragraph will be in a larger font, but the following paragraphs will be in their usual font size. This is useful for when you want to style the next element in a list, or the next element in a row.

To use an adjacent sibling selector, you need to specify the element you want to target, and then the element you want to target it after, then a plus sign.

General Sibling Selector

General sibling selectors are similar to adjacent selectors, but instead of targeting the element right after the target element, they target all elements that come after the target element.

Let’s say you wanted to style all paragraphs after an h1 :

This will make all paragraphs after the header be in a larger font, but the paragraphs before the header will be in their usual font size. This is useful for when you want to style all elements after a certain element, but not the element itself.

CSS Selectors

A CSS selector selects the HTML element(s) you want to style.

CSS Selectors

CSS selectors are used to «find» (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

elements on the page will be center-aligned, with a red text color:

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with :

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with will be red and center-aligned:

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only

elements with will be red and center-aligned:

HTML elements can also refer to more than one class.

Example

In this example the

element will be styled according to and to :

This paragraph refers to two classes.

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h2 <
text-align: center;
color: red;
>

p <
text-align: center;
color: red;
>

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:

CSS Group Selector

CSS3 Tutorial Index

CSS Overview

CSS Basics

CSS Selectors

CSS Properties

As you know, we can use a «class» or «id» to target a specific element so that some style can be applied to them. These are a particular type of CSS selectors that makes CSS styling distinct. But there is also another type of selector available that can use the collective elements for the style simultaneously. In this chapter, you will learn about the Group Selector in CSS.

CSS Grouping Selector

As you have used the different CSS selectors that only target either a class or an ID or a single element for applying the styles. Nevertheless, CSS also allows making it incredibly easy for targeting more than one element at a time to allow for specific CSS properties and rules. To do this, you have to separate the selector’s names with a comma, and you are good to implement CSS styles on many elements.

This is one of the coolest features of CSS, which is meant for greater code re-usability as there is no ground for specifying the similar properties on some elements or classes separately when CSS has the possibility to re-use them.

CSS Grouping Selector Example

Often selectors use some similar styles, for example, using the same font-family. In these cases, instead of defining font-family one by one for every selector, you can group them and thus can assign the same font-family to all selectors at once.

CSS Code snippet without group selector would look like this:

Now, after using the group selector, its format is as follows:

This is a basic example to explain how a group selector works. You can also use it with different types of selectors and can improve your understanding.

CSS Foundations

Foundations Course

Introduction

In the previous lesson, you learned how to write the HTML that determines how a web page is structured. The next step is to make that structure look good with some style, which is exactly what CSS is for. In this lesson, we’re going to focus on what we believe are some foundational CSS concepts, things that everyone should know from the beginning — whether they are just starting out or simply need a refresher.

Lesson Overview

This section contains a general overview of topics that you will learn in this lesson.

Basic Syntax

At the most basic level, CSS is made up of various rules. These rules are made up of a selector (more on this in a bit) and a semi-colon separated list of declarations, with each of those declarations being made up of a property:value pair.

for content in your projects, but as we learn more about CSS you’ll find that there are many cases where the thing you need is just a container for other elements. Many of our exercises use plain

Selectors

Selectors simply refer to the HTML elements to which CSS rules apply; they’re what is actually being “selected” for each rule. The following subsections don’t cover every selector available, but they’re by far the most common and the ones you should get comfortable using first.

Universal Selector

The universal selector will select elements of any type, hence the name “universal”, and the syntax for it is a simple asterisk. In the example below, every element would have the color: purple; style applied to it.

Type Selectors

A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:

element wouldn’t be.

Class Selectors

Class selectors will select all elements with the given class, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:

Note the syntax for class selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same class on as many elements as you want.

ID Selectors

ID selectors are similar to class selectors. They select an element with the given ID, which is another attribute you place on an HTML element:

Instead of a period, we use a hashtag immediately followed by the case-sensitive value of the ID attribute. A common pitfall is people overusing the ID attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an ID makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use IDs sparingly (if at all).

The major difference between classes and IDs is that an element can only have one ID. An ID cannot be repeated on a single page, and the ID attribute should not contain any whitespace at all.

Grouping Selector

What if we have two groups of elements that share some of their style declarations?

Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the color or background-color for both classes at once.

Chaining Selectors

Another way to use selectors is to chain them as a list without any separation. Let’s say we had the following HTML:

We have two elements with the subsection class that have some sort of unique styles, but what if we only want to apply a separate rule to the element that also has header as a second class? Well, we could chain both the class selectors together in our CSS like so:

This can also be used to chain a class and an ID, as shown below:

You can take the two elements above and combine them with the following:

Descendant Combinator

Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.

In the above example, the first two elements with the contents class (B and C) would be selected, but that last element (D) won’t be. Was your guess correct?

Properties to Get Started With

There are some CSS properties that you’re going to be using all the time, or at the very least more often than not. We’re going to introduce you to several of these properties, though this is by no means a complete list. Learning the following properties will simply be enough to help get you started.

Color and Background-Color

The color property sets an element’s text color, while background-color sets, well, the background color of an element. I guess we’re done here?

Almost. Both of these properties can accept one of several kinds of values. A common one is a keyword, such as an actual color name like red or the transparent keyword. They also accept HEX, RGB, and HSL values, which you may be familiar with if you’ve ever used a photoshop program or a site where you could customize your profile colors.

Take a quick look at CSS Legal Color Values to see how you can adjust the opacity of these colors by adding an alpha value.

Typography Basics and Text-Align

font-family can be a single value or a comma-separated list of values that determine what font an element uses. Each font will fall into one of two categories, either a “font family name” like «Times New Roman» (we use quotes due to the whitespace between words) or a “generic family name” like sans-serif (generic family names never use quotes).

If a browser cannot find or does not support the first font in a list, it will use the next one, then the next one and so on until it finds a supported and valid font. This is why it’s best practice to include a list of values for this property, starting with the font you want to be used most and ending with a generic font family as a fallback, e.g. font-family: «Times New Roman», sans-serif;

font-size will, as the property name suggests, set the size of the font. When giving a value to this property, the value should not contain any whitespace, e.g. font-size: 22px has no space between “22” and “px”.

Image Height and Width

Images aren’t the only elements that we can adjust the height and width on, but we want to focus on them specifically in this case.

By default, an element’s height and width values will be the same as the actual image file’s height and width. If you wanted to adjust the size of the image without causing it to lose its proportions, you would use a value of “auto” for the height property and adjust the width value:

For example, if an image’s original size was 500px height and 1000px width, using the above CSS would result in a height of 250px.

It’s best to include both of these properties for elements, even if you don’t plan on adjusting the values from the image file’s original ones. When these values aren’t included, if an image takes longer to load than the rest of the page contents, the image won’t take up any space on the page at first, but will suddenly cause a drastic shift of the other page contents once it does load in. Explicitly stating a height and width prevents this from happening, as space will be “reserved” on the page and will just appear as a blank space until the image loads.

The Cascade of CSS

Sometimes we may have rules that conflict with one another, and we end up with some unexpected results. “But I wanted these paragraphs to be blue, why are they red like these other paragraphs?!” As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against our wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.

So if you end up with some unexpected behavior like this it’s either because of these default styles or due to not understanding how a property works or not understanding this little thing called the cascade.

The cascade is what determines which rules actually get applied to our HTML. There are different factors that the cascade uses to determine this, three of which we’ll go over to hopefully help you avoid (as many of) those frustrating “I hate CSS” moments.

Specificity

A CSS declaration that is more specific will take precedence over less specific ones. Inline styles, which we will go over more in the Adding CSS to HTML section towards the end of the lesson, have the highest specificity compared to selectors, while each type of selector has its own specificity level that contributes to how specific a declaration is. Other selectors contribute to specificity, but we’re focusing only on the ones mentioned in this lesson:

Let’s take a look at a few quick examples to visualize how specificity works. Consider the following HTML and CSS code:

In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors, so the color: red; declaration would take precedence.

Now, let’s change things a little bit:

In the example above, despite rule 2 having more class selectors than ID selectors, rule 1 is more specific because ID beats class. In this case, the color: blue; declaration would take precedence.

In this final example, both rules are using ID and class selectors, so neither rule is using a more specific selector than the other. The cascade then checks the amounts of each selector type. Both rules only have one ID selector, but rule 2 has more class selectors, so rule 2 has a higher specificity!

While the color: red declaration would take precedence, the background-color: yellow declaration would still be applied since there’s no conflicting declaration for it.

Here both rule 1 and rule 2 have the same specificity. Rule 1 uses a chaining selector (no space) and rule 2 uses a descendant combinator (the empty space). But both rules have two classes and the combinator symbol itself does not add to the specificity.

This example shows the same thing. Even though rule 2 is using a child combinator ( > ), this does not change the specificity value. Both rules still have two classes so they have the same specificity values.

In this example, rule 2 would have higher specificity and the orange value would take precedence for this element. Rule 2 uses a type selector, which has the lowest specificity value. But rule 1 uses the universal selector ( * ) which has no specificity value.

Inheritance

The exception to this is when directly targeting an element, as this always beats inheritance:

Despite the parent element having a higher specificity with an ID, the child element would have the color: blue style applied since that declaration directly targets it, while color: red from the parent is only inherited.

Rule Order

The final factor, the end of the line, the tie-breaker of the tie-breaker. Let’s say that after every other factor has been taken into account, there are still multiple conflicting rules targeting an element. How does the cascade determine which rule to apply?

Really simply, actually. Whichever rule was the last defined is the winner.

Adding CSS to HTML

Okay, we went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to our HTML. There are three methods to do so.

External CSS

Then inside of the newly created styles.css file, we have the selector (the div and p ), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, we place any declarations inside of the declaration block. color: white; is one declaration, with color being the property and white being the value, and background-color: black; is another declaration.

A couple of the pros to this method are:

Internal CSS