CSS — Cascade, Specificity & Basic selectors
Hi everyone,
Welcome to the series of articles where I will tell you about all the selectors in CSS. Let’s get started right away
I will tell you about cascade, specificity what are the basic selectors in this section.
Cascade (Cascading Style Sheet)
The cascading algorithm determines how to find the value to apply for each property for each document element.
Cascading order
Sorted in order of increasing specificity.
1. Browser defaults styles
2. External styles
3. Internal styles
4. Inline styles
— Example
— Output
Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.
Note: Universal selector (*), combinators (+, >, ~, “ “) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)
Note: Proximity of elements in the document tree has no effect on the specificity.
universal selector (*) = 0,0,0 score
type selectors and pseudo elements = 0,0,1 score
class selectors and pseudo classes = 0,1,0 score
ID selectors = 1,0,0 score
inline style = 1,000 score
To calculate the specificity of selectors in CSS, you can visit. https://specificity.keegan.st
— Example
In the following example, let’s try to change the font color of the <li> tag.
Now let’s calculate the specificity values of the selectors.
- type = 0,0,1 score
- type + class = 0, 1, 1 score
- type + ID = 1, 0, 1 score
- type + ID + class = 1, 1, 1 score
- type + ID + type + ID = 2, 0, 2 score
as can be seen, the more clearly the element to be selected is defined, the higher the specificity value.
As a result, the styles of the selector with 2, 0, 2 score will be applied (even if the code is at the top relative to the others during the line), and the <li> tag will be red.
— Output
If selectors score the same, CSS will apply the styles of the last selector in the line of code.
— Example
1) Basic Selectors
Universal selector (*)
Matches elements of any type.
— Output
Type selector
Matches elements by node name. In other words, it selects all elements of the given type within a document.
— Output
Class selectors (.)
Matches elements based on the contents of their class attribute.
— Output
ID selectors (#)
Matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.
— Output
Attribute selectors
[attr]
Matches elements with an attribute name of attr.
— Example
— Output
[attr=value]
Matches elements with an attribute name of attr whose value is exactly value.
— Example
— Output
[attr~=value]
Matches elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
— Example
— Output
[attr|=value]
Matches elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen.
— Example
— Output
[attr^=value]
Matches elements with an attribute name of attr whose value is prefixed (preceded) by value.
— Example
— Output
[attr$=value]
Matches elements with an attribute name of attr whose value is suffixed (followed) by value.
— Example
— Output
[attr*=value]
Matches elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
— Example
— Output
[attr operator value i]
Adding an i or I before the closing bracket causes the value to be compared case-insensitively.
— Example
— Output
For all the examples in this section, visit.
We have come to the end of this chapter. See you in chapter-2.
Chapter-2
Resources
