CSS Selectors, | Explain CSS selector, CSS id selector, CSS class selector, CSS universal selector, CSS group selector and List of all CSS simple selector.
web development
Wednesday 24 March 2021
Hacker
web development
CSS Selectors
In the web page A CSS selector selects the HTML elements which you want to style. CSS Selectors is the part of CSS rule set.
 |
| CSS Selectors |
CSS selectors selects HTML elements according to CSS id, class, type, attribute etc.
CSS Selectors
CSS selectors is use to "find" or select the HTML elements you want to style.
We can divide CSS selectors into major five categories:
- Simple selectors :(select CSS elements based on name, id, class)
- Combinator selectors :(select elements based on a specific relationship between them).
- Pseudo-class selectors : (select elements based on a certain state)
- Pseudo-elements selectors : (select and style a part of an element)
- CSS attribute selectors : (select elements based on an attribute or attribute value)
explain the most basic CSS selectors.
The CSS element Selector
The CSS element selector is select HTML elements based on the element name.
Example
In this Example, all <h3> elements on the web page will be center-aligned, with a Blue text color:
text-align: center;
color: blue;
}
The CSS id Selector
In The webpage id selector is select the id attribute of an HTML element to select a specific element.
The CSS id element is unique within a web page, so the id selector is used to select one unique element!
To select an element with a specific id,we write a hash (#) character, In CSS followed by the id of the element.
Example
The CSS rule below we will be applied to the HTML element with id="id1":
text-align: center;
color: blue;
}
Note: An id name can't start with a number!
The CSS class Selector
The CSS class selector are select HTML element with a specified class attribute.
In the web page To select html elements with a specific class, We are use period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be blue and center-aligned:
text-align: center;
color: blue;
}
We can also specify that only Particular HTML elements should be affected by the css class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
text-align: center;
color: red;
}
HTML elements can also refer to more than single class.
Example
In this example the <p> element will be styled according to class="center" and to class="large":
Note: In The CSS A class name can not start with a number!
The CSS Universal Selector
In The CSS universal selector (*) is selects all HTML elements on the page.
The CSS rule below will affect every HTML element on the page:
text-align: center;
color: blue;
}
The CSS Group Selector
The css grouping selector is select all the HTML elements with the same style definitions.
Let's see the CSS code (the p, h1and h2 elements have the same style definitions):
text-align: center;
color: blue;
}
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
To group selectors, separate each selector with a comma's (,).
As we can see, we need to define CSS properties for all the elements.
It can be grouped in following ways:
text-align: center;
color: red;
}
Test Yourself with Exercises!
All CSS Simple Selectors
| CSS Selector | Example | Example description |
|---|---|---|
| #id | #rahasyacommunity | Selects the element with id="rahasyacommunity" |
| .class | .basic | Selects all elements with class="basic" |
| element.class | h1.intro | Selects only <h1> elements with class="intro" |
| * | * | Selects all elements |
| element | h3 | Selects all <h3> elements |
| element,element,.. | h1, p | Selects all <h1> elements and all <p> elements |
No comments:
Post a Comment