Table of contents
CSS
CSS (Cascading Style Sheets) is a stylesheet language which we use to style an HTML document.
With the help of CSS we can tell browser how each element of webpage should get render.
What is a CSS selector?
1. CSS selectors are used to target html elements on our web pages that we want to style.
2. CSS selectors tell to the browser which HTML elements needs to be get selected and given styles are applied to that selected element only.
3. In this article will learn about following CSS selectors-
- Universal selector
- Individual selector
- Class and id selector
And selector
Combined selector
Inside an element
Direct child
sibling selector
Before and After
1) Universal selector-
This CSS selector is used to select all elements from the webpage all the given CSS properties will apply to all elements of the webpage.
For selecting all elements we use asterisks (*) sign.
- e.g.
*{
color:red;
}
In the above example all elements of html page(i.e.div,h1,p,ul,ol,li etc.) will have red color to the text inside them .
Please have a look at below example for better understanding.
2) Individual selector-
- This selector helps to select individual elements from our webpage.
- If we want to apply CSS properties to particular elements in our webpage then we use individual selector.
e.g.
p{
background-color:yellow;}
In the above example only all paragraph elements get selected and background color property will apply to that selected elements and rest of the elements will render as it is.Please have a look at below example for better understanding.
3) Class and Id selector-
Class selector helps us to select all the elements of our webpage those are having a required class.
For declaring class we use the dot (.) before the class name.
e.g
.center {
text-align: center;
color: brown;
}
In the above example, all html elements get selected those are having class name as center and CSS propeties will apply to them.
- Please have a look at below example for better understanding.
Id selector selets all elements from our webpage those are having required id.
'#' is used to set required id for selection.
e.g.
#test{
color:#6A1B4D; font-weight:bold; font-size:25px;}
In above example all elements from our webpage gets selected those are having id equal to test and font size 15px will apply to text inside selected elements.
- Please have a look at below example for better understanding.
4)And selector-(chained selector)
- This selector help us to chained elements and classes.
e.g.
p.info.bg_col{
text-align:center; font-weight:bold; color:#4DD637; font-size:30px}
Above example selects all p elements from our webpage those are having classes as info and bg_col and CSS properties gets applied to text inside that element.
- Please have a look at below example for better understanding.
5) Combined Selector-
In this selector we can combine multiple elements and classes as a selection criteria.
If we want to apply same CSS property to multiple elements then we can use combine selector.
We use comma(,) to combine elements.
- e.g.
p,span{
background-color:#03203C;
color:white;
}
In the above example all h1 elements and from li element those are having only bg_col class will get selected and CSS property will applied to them.
Please have a look at below example for better understanding.
6) Inside an element-
This selector help us to select elements which are inside an other element.
Space is used in between tags.
e.g
div h1 p{
font-size:50px; background-color:#B9345A;
}
-In the above example all the p elements get selected those are inside h1 element and that h1 element should be inside div element and CSS property will applied to them.
- Please have a look at below example for better understanding.
7) Direct Child-
This selector is used to selects tags that are direct children to the first tag.
'>' this sign is used between parent and child element.
e.g.
div>span>p{
color:#242B2E;
background-color:#50DBB4;
}
In the above example all p and span elements get selected those are direct children of div element.
- Please have a look at below example for better understanding.
8) Sibling Selector-
This selector is used when we want select sibling of tag.
In this we use'+' or '~' sign for element selection.
'+' help us to select only one element direct after mention element.
'~' help us to select all element direct after menstion element.
e.g.
.sibling + p{
color:white;
background-color:#8D3DAF;
}
-In the above example only one p element get selected which is comes after element having a sibling class.
.demo ~ p{
background-color:#22CB5C;
}
-In the above example all p elements gets selected which are comes after element having sibling_2 class.
- Please have a look at below example for better understanding.
9) Before and After pseudo selector-
The :: before pseudo-element is used to insert some content before the content of an selected element.
The :: after pseudo-element is used to insert some content after the content of an selected element.
The content property should be there in CSS. Whatever you mention in content property it will be displayed on browser before or after the element based on selector type.
p::before{
content: 'This is add using before selector';
display: block;
width: 365px;
height: 25px;
border-radius: 10px;
background-color: #E07C24;
}
p::after{
content: 'This is add using after selector';
display: block;
width: 365px;
height: 25px;
border-radius: 10px;
background-color: #3DBE29;
}
.intro:hover::before{
content: 'added before';
display: block;
width: 300px;
height:30px;
background-color: #A77B06;
}
.intro:hover::after{
content: 'added after';
display: block;
width:50px;
heiht:20px;
border-radius:10px;
background-color: #FF6666;
}
- Please have a look at below example for better understanding.