In this blog, I recommend the most used CSS selectors, which is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ARil9gMA9aMIG7_yPJ1V-LfHkm35-Mvfore2BAH1WEybCNzunE4DQBfMeP0E_F5rV4Zf25DixIFwQEBLy8KkC1C96NrM6pZm_p0Y601R84MgxeZRhprYSaai2YNexhVwNs4OVRziSq4/s640/2015_07_17_LearnCSS.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ARil9gMA9aMIG7_yPJ1V-LfHkm35-Mvfore2BAH1WEybCNzunE4DQBfMeP0E_F5rV4Zf25DixIFwQEBLy8KkC1C96NrM6pZm_p0Y601R84MgxeZRhprYSaai2YNexhVwNs4OVRziSq4/s640/2015_07_17_LearnCSS.jpg)
1. .X
Definition and usage: The .X selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
Definition and usage: The .X selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
.intro {
background-color: green;
}
2. #X
Definition and usage: Selects the element with id="X". The #X selector styles the element with the specified id.
#name {
background-color: green;
}
Definition and usage: Selects the element with id="X". The #X selector styles the element with the specified id.
#name {
background-color: green;
}
3. *
Definition and usage: The * selector selects all elements. The * selector can also select all elements inside another element.
* {
background-color: yellow;
font-size: 15px;
}
Definition and usage: The * selector selects all elements. The * selector can also select all elements inside another element.
* {
background-color: yellow;
font-size: 15px;
}
4. X Y
Definition and usage: Select and style every Y element that is inside X elements.
.intro #city {
background-color: yellow;
}
Definition and usage: Select and style every Y element that is inside X elements.
.intro #city {
background-color: yellow;
}
5. X
Definition and usage: Selects all X elements. The element selector selects all elements with the specified X element name.
p {
background-color: yellow;
text-align: center;
}
Definition and usage: Selects all X elements. The element selector selects all elements with the specified X element name.
p {
background-color: yellow;
text-align: center;
}
6. X, Y
Definition and usage: Select all X elements and all Y elements to style several elements with the same style, separate each element name with a comma.
h1, p {
background-color: yellow;
border: 3px solid red;
}
Definition and usage: Select all X elements and all Y elements to style several elements with the same style, separate each element name with a comma.
h1, p {
background-color: yellow;
border: 3px solid red;
}
7. X > Y
Definition and usage: Selects all Y elements where the parent is a X element.
div > p {
background-color: yellow;
}
Definition and usage: Selects all Y elements where the parent is a X element.
div > p {
background-color: yellow;
}
8. X + Y
Definition and usage: Selects all Y elements that are placed immediately after X elements.
div + p {
background-color: yellow;
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Definition and usage: Selects all Y elements that are placed immediately after X elements.
div + p {
background-color: yellow;
border-style: solid;
border-width: 2px 10px 4px 20px;
}
9. X:checked
Definition and usage: The :checked selector matches every checked X element.
input:checked {
height: 50px;
width: 50px;
}
Definition and usage: The :checked selector matches every checked X element.
input:checked {
height: 50px;
width: 50px;
}
10. X:after
Definition and usage: Insert something after the content of each X element.
p::after {
content: " - Scuti";
color: red;
}
Definition and usage: Insert something after the content of each X element.
p::after {
content: " - Scuti";
color: red;
}
11. X:before
Definition and usage: Insert something before the content of each X element.
p::before {
content: "Scuti - ";
color: red;
}
Definition and usage: Insert something before the content of each X element.
p::before {
content: "Scuti - ";
color: red;
}
12. X:hover
Definition and usage: The :hover selector is used to select elements when you mouse over them.
h1:hover {
background-color: green;
border: 3px solid red;
}
Definition and usage: The :hover selector is used to select elements when you mouse over them.
h1:hover {
background-color: green;
border: 3px solid red;
}
13. X:link
Definition and usage: The :link selector does not style links you have already visited.
a:link {
background-color: yellow;
font-size: 25px;
}
Definition and usage: The :link selector does not style links you have already visited.
a:link {
background-color: yellow;
font-size: 25px;
}
14. X:visited
Definition and usage: The :visited selector is used to select visited links.
a:visited {
background-color: yellow;
}
Definition and usage: The :visited selector is used to select visited links.
a:visited {
background-color: yellow;
}
15. X:active
Definition and usage: The :active selector is used to select and style the active link. A link becomes active when you click on it.
a:active {
background-color: yellow;
}
Definition and usage: The :active selector is used to select and style the active link. A link becomes active when you click on it.
a:active {
background-color: yellow;
}
0 Comments:
Post a Comment