CSS BUILDING BLOCKS - CASCADE AND INHERITANCE, CSS SELECTORS

CSS BUILDING BLOCKS - CASCADE AND INHERITANCE, CSS SELECTORS

CSS BUILDING BLOCKS - CASCADE AND INHERITANCE, CSS SELECTORS

The aim of this lesson is to help you understand the most fundamental concepts of CSS  the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts between style declarations are resolved.

While working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course, an understanding of these concepts will save you from a lot of stress. We encourage you to read this section carefully and make sure you understand the concepts before moving on.

TOPICS

Let us break this article into parts so we can easily understand the entire content of this article. We will be looking majorly at inheritance and cascading.

  1. Cascade
  2. Specificity
  3. Inheritance
  4. CSS Selectors

CONFLICTING RULES

CSS stands for Cascading Style Sheets, and that first word cascading is very important to understand. It guides the way css behaves especially when it comes to styling of html elements.

At some point, you may be having problems with css styling not working on elements. Often, the problem is that you create two rules that apply different values of the same property to the same element. Cascade and the closely-related concept of specificity are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work.

Also significant here is the concept of inheritance, which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect.

Let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your CSS. These can seem like a tricky set of concepts to understand. As you get more practice writing CSS, the way it works will become more obvious to you.

CASCADE

Stylesheets cascade at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules from the same cascade layer apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.

In the below example, we have two rules that could apply to the <h1> element. The <h1> content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins.

  

SPECIFICITY

Specificity is the algorithm that the browser uses to decide which property value is applied to an element. If multiple style blocks have different selectors that configure the same property with different values and target the same element, specificity decides the property value that gets applied to the element. 

Below, we again have two rules that could apply to the <h1> element. The <h1> content below ends up being colored red because the class selector main-heading gives its rule a higher specificity. So even though the rule with the <h1> element selector appears further down in the source order, the one with the higher specificity, defined using the class selector, will be applied.

 

 

INHERITANCE

Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.

For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

 

 

CSS SELECTORS

A CSS selector is the first part of a CSS Rule. It tells the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

 

h1{
Color: blue;
Background-color: yellow;
}

P{
Color: red;
}

In other articles you may have met some different selectors, and learned that there are selectors that target the document in different ways

Example by selecting an element such as h1, or a class such as .special.

In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification and Level 4 Selectors specification, which are both mature specifications, therefore you will find excellent browser support for these selectors.

SELECTORS LIST

If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an h1 and also a class of .special, I could write this as two separate rules.

h1 {
  color: blue;
}

.special {
  color: blue;
}

I could also combine these into a selector list, by adding a comma between them.

h1, .special {
  color: blue;
}

White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.

h1,
.special {
  color: blue;
}

In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.

In the following example, the invalid class selector rule will be ignored, whereas the h1 would still be styled.

h1 {
  color: blue;
}

..special {
  color: blue;
}

When combined however, neither the h1 nor the class will be styled as the entire rule is deemed invalid just like below.

h1, ..special {
  color: blue;
}

TYPES OF SELECTORS

There are a few different groupings of selectors, and knowing the type of selector you might need will help you to find the right tool for the job. In this article we will look at the different groups of selectors in more detail.

Types, Class and ID Selectors

This group includes selectors that target an HTML element such as an <h1> and <p>.

h1 {
}

It also includes selectors which target a class:

.box {
}

or, an ID:

#unique {
}

ATTRIBUTE SELECTORS

This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:

a[title] {

}

Or even make a selection based on the presence of an attribute with a particular value:

a[href="https://example.com"]

{

}

PSEUDO CLASSES AND PSEUDO ELEMENTS

This group of selectors includes pseudo-classes, which style certain states of an element. The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:

a:hover {
}

It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.

p::first-line {
}

COMBINATORS

The final group of selectors combine other selectors in order to target elements within our documents. The following, for example, selects paragraphs that are direct children of <article> elements using the child combinator (>):

article > p {
}

SUMMARY

In this article we've introduced CSS selectors, which enable you to target particular HTML elements. Next, we'll take a closer look at type class and ID selectors.

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow