Photo by Nick Karvounis on Unsplash
Introduction of CSS and CSS Selector
let's learn about CSS selector
Table of contents
- What is CSS
- How to add CSS in web page
- Selectors in CSS
- Types of selector
What is CSS
Cascading Style Sheets (CSS) is a stylesheet language used to style and layout web pages. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
Structure of css : -
Example:-
How to add CSS in web page
There are three ways to add CSS in web page.
- Internal
- Inline
- External
Internal css
Internal css are defined within the < style > element, inside the < head > section of an HTML page.
Example :-
Inline css
Inline css are defined within the "style" attribute of the relevant element.
Example : -
External CSS
External css are defined within the < link > tag , inside the < head > section of an HTML page.
For external style sheet you can write it in any text editor and saved it with .css extension
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
rel :- It is relationship between external file and current file. For exapmle rel="stylesheet"
type :- It is type of document which you are linking to the HTML page. For example type="text/css".
href :- It is use to specify the location of CSS file. For example href="style.css"
Example:-
Selectors in CSS
First step in CSS is targeting the HTML elements and this targeting feature you can achieve with selector.
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Types of selector
Universal selector(*)
It can be used to select any and all types of elements in an HTML page. The universal selector becomes helpful when you want to put a specific style in all the HTML elements within your web page.
Syntax: -
* {
property : value;
}
Example :-
* {
margin : 0px;
padding : 0px;
}
The universal ( * ) selector can also select all elements inside another element.
Syntax : -
parent * {
property : value;
}
Example :-
Individual selector(Element selector)
The individual or element selector selects the HTML element by name.
Syntax: -
html_tag {
property : value;
}
Example :-
class( . ) and id( # )selector
class selector select the class attribute of HTML element. it is written by the dot(.) character followed by class name of element.
structure :-
. class_name {
property : value;
}
Id selector select the id attribute of HTML element. it is written by the hash(#) character followed by id of element.
Note:- id of HTML element is always unique within the page.
structure :-
# id {
property : value;
}
Example of class and id selector:-
Grouping(combined) selector
It select the multiple selector at the same time. for this you have to separate the selector's names with a comma(,)
syntax :-
selector1,selector2, selector3{
property : value;
}
Example : -
Inside element or descendant selector (space)
This selector is implemented to select every child element within the particular tag mentioned in the CSS selector section. The tags may be of the direct child of any specific tag or extremely deep within the particular tag.
syntax :-
selector1 selector2 selector3{
property : value;
}
Example :-
In above example all paragraph are selected except last one, because last paragraph is not the part of div tag.
Direct child(>) selector
It is implemented for selecting that particular element that lies within the immediate child of that specific tag or direct child of that tag.
syntax :-
selector > selector{
property : value;
}
Example :-
In above example only two paragraph are selected, because those two paragraph are direct child of < div > tag. Others element(article, list) are not direct child of that div. That's why the are not selected.
Sibling selector ( + , ~)
1. Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element.
Syntax :-
selector + selector{
property : value;
}
example :-
In above example only last paragraph is selected , because after the < div > tag there is only one < P > tag.
2. General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a specified element.
Syntax :-
selector ~ selector{
property : value;
}
Example :-
In above example last two paragraph are selected , because that two paragraph are sibling of < div > tag
Pseudo class selector
A pseudo-class is used to define a special state of an element. special state means :-
- When a user moves the mouse over a specific HTML element, then apply the style to that particular element.
- To apply a different style for user-visited and user-unvisited HTML anchors.
A pseudo-class selector consists of a colon (:) followed by the pseudo-class name.
Syntax :-
selector : pseudo-class {
property: value;
}
Popular pseudo classes
- : hover
- : focus
- : visited
:hover
It is use to implement particular effect to any HTML element when you move the mouse pointer over it.
Syntax :-
selector : hover {
property: value;
}
Example :-
:focus
It is implemented for selecting an element that is currently focused on by its user.
Syntax :-
selector : focus{
property: value;
}
Example : -
In above example when mouse focus inside input box then its color get changed.
:visited
It selects the visited links and adds special styles to them.
Syntax :-
selector :visited{
property: value;
}
Example :-
Pseudo Element selector
A pseudo-element selector is used to style specified parts of an element. Pseudo-element selector consists of double colon (::) followed by the pseudo-element name.
Syntax :-
selector : pseudo-element{
property: value;
}
Popular pseudo element selector
::before
::after
content property is mandatory property for pseudo element selector
::before
The before pseudo-element can be used to insert some content before the content of an element.
Syntax :-
selector ::before{
content: " ";
Other property ;
}
Example :-
::after
The after pseudo-element can be used to insert some content after the content of an element.
Syntax :-
selector ::after{
content: " ";
Other property ;
}
Example : -
nth-child selector
The nth-child selector allows you to select one or more elements based on their source order, according to a formula.
Syntax :-
:nth-child(n) {
//CSS Property
}
The n can either be a keyword, formula, or a number.
keyword values is odd or even
number(1,2,3....)
formula(Functional notation) is (an + b),where
- a is an integer step size. - n is all nonnegative integers, starting from 0. - b is is an integer offset.
Formula example :-
2n+ 2 represent below elements
2 * 0 + 2 = 2,
2 * 1 + 2 = 4 and may more
Example of nth child :-