CSS Selectors

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Selectors

What is a CSS Selector

Selectors allow for styling to be applied to particular page elements. This critical concept makes it easy to choose a specific page element and assign CSS.

CSS selector is property is used to target a particular element and apply the necessary styles to that element. Imagine, there 100 paragraph elements in a web page and you want to target one specific paragraph element change the font-color of that paragraph, how do you do that?. That's where that CSS Selector comes in

CSS selectors allow you to select and change the HTML elements on a web page very easily.

CSS selectors are used to find or select a specific HTML elements based on their id, class, type, attribute, and more.

CSS Selectors are different types

The most common CSS selectors are as follows.

  1. The Element Selector
  2. The id Selector
  3. The Class selector
  4. Descendant Combinator
  5. Child Combinator
  6. General Sibling Combinator
  7. Adjacent Sibling Combinator

Let's look at each of them

CSS Element Selector

css element selctor is used to target a specific element in a web page

The CSS element selector is used to target a particular factor in a web page and apply the style. But when you have many selectors with the same name, CSS element selector is not a good choice.

Example

So, if we apply this selector to the following HTML:

it will produce the following output

Output


Watch GIF Try It Now

CSS id Selector

CSS id selector targets a specific HTML element with a unique id

CSS id selector is used to overcome the problem raised in element selector. When you have too many elements with the same name, and you want to target each of the CSS elements, it would be very difficult.

CSS id selector is used to target each and every element or any no of elements in a web page by giving them unique ids. Imagine, if you have ten paragraphs you can give ten different unique names and target them using the id selector.

Id selector is starts with # symbol followed by the selector name

For example take look at the below example

This is how you can give the selector name. See the below css selector code to to understand how you can target that mypara1 and mypara2 ids

Example

Note:

Selector names must be unique


The style rule below will be applied to the HTML element with id="mypara1" and id="mypara2":

After applying the css to the above html, it will produce the following result

Output

Watch GIF Try It Now

CSS class Selector

Imagine, you have 10 elements and you want to apply the same styles to all the 10 elements. Of course, you can give ten different unique id names and apply the styles. But that's not a good practice!. Why? What if you have 1000? Do you give 1000 names?. Nope!

That's where the CSS class selector comes in. What it does is, it applies the same style for any no of elements which comes under the same class.

Example

If you notice the above code, I put 2 paragraphs and 1 head tag under one class called myclass. And I applied the same style for all the three elements in a single shot.

The CSS class syntax is . Dot symbol followed by the class name

Always remember the class name can not be start a number


After applying the css to the above html, it will produce the following result

Output

Watch GIF Try It Now

CSS Group Selector

CSS group selector is used to group the list of elements and apply the same style to all elements in a single shot.

For example, you have one h2 and one p, and other tag. What you do is, just keep all the ids in one line separated by a comma and apply the same style, like the second example below

Before Grouping After Grouping

Grouping mainly reduces the no of lines of code we need to write.


Watch GIF Try It Now

CSS Descendant Combinator Selector

The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.

Example:

The CSS code for this looks like:

Apply this selector to the following HTML:

This declaration block will apply to all elements that have a class of box that are inside an element with an ID of myContainer.

Note: The .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

After applying the css to the above html, it will produce the following result

Output

Try It Now

What is a Combiator ?

Combinators give us the flexibility of targeting any siblings of an element. We can use the greater-than sign (>), plus sign (+), or tilde symbol (~) to make our selectors more specific.

Combinators explain the relationship between elements in a selector. So every time we target two or more elements with one selector.

combinators also give us the flexibility of targeting any siblings of an element. We can use the greater than sign ( > ), the plus( + ) sign, or a tilde symbol ( ~ ) to make our selectors more specific.


CSS Child Combinator

CSS child combinator targets HTMLelements that are direct children of other elements

The greater than sign is referred to as a child combinator. And selectors that use child combinators are called child selectors because they target elements that are direct children of other elements. Now, direct children are those elements that are directly nested inside a parent element.

This is the same code from the descendant combinator example, but instead of a space character, we're using the greater-than symbol

Example

In this example, the selector will match all elements that have a class of box and that are immediate children of the #myContainer element. That means, unlike the descendant combinator, there can't be another element wrapping .

The CSS code for this looks like:



After applying the css to the above html, it will produce the following result

Output

Try It Now

General Sibling Combinator

The tilde symbol is called a general sibling combinator Because it targets siblings, but this time it not only targets an immediate sibling, it targets every specified sibling that follows.

This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2>and<p>, and the styles would still apply.

Example

The CSS code for this looks like:



After applying the css to the above html, it will produce the following result

Output

Watch GIF Try It Now

Adjacent Sibling Combinator

The plus sign combinator is called an adjacent sibling combinator. And selectors that use them are called adjacent sibling selectors because they target an elements next sibling on the page. So the one that immediately follows the element.

This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn't have the methods applied.

Example

Let's see what the CSS code for this looks like:

So, if we apply this selector to the following HTML:

After applying the CSS to the above HTML, it will produce the following result

Output

Try It Now

Using combinators
  • The > combinator targets a direct child of an element
  • The + combinator targets an element's immediate sibling
  • The ~ combinator targets all the specified siblings that follow an element


CSS Selectors Reference

CSS Selectors Reference

Other Advanced CSS Selectros you might want to learn

CSS empty Selector

CSS enabled Selector

CSS first-child Selector

CSS first-line Selector

CSS first-of-type Selector

CSS link Selector

Practice with our Interactive Live Editors and Take your CSS Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Exercise 7

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM