The CSS selectors you need to memorize

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.

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.

.intro {

  background-color: green;

}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/1/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/17/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/4/

4. X Y
Definition and usage: Select and style every Y element that is inside X elements.
.intro #city {
    background-color: yellow;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/5/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/18/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/6/

7. X > Y
Definition and usage: Selects all Y elements where the parent is a X element.
div > p {
    background-color: yellow;
}

Example:  https://jsfiddle.net/quanghoan/wawcc5d4/7/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/8/

9. X:checked
Definition and usage: The :checked selector matches every checked X element.
input:checked {
    height: 50px;
    width: 50px;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/9/

10. X:after
Definition and usage: Insert something after the content of each X element.
p::after {
    content: " - Scuti";
    color: red;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/10/

11. X:before
Definition and usage: Insert something before the content of each X element.
p::before {
    content: "Scuti - ";
    color: red;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/11/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/13/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/14/

14. X:visited
Definition and usage: The :visited selector is used to select visited links.
a:visited {
    background-color: yellow;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/15/

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;
}

Example: https://jsfiddle.net/quanghoan/wawcc5d4/16/

Reference: http://www.w3schools.com/cssref/css_selectors.asp

If you liked this article

Let's subscribe the updates of Scuti!

Share on Google Plus

About Quang Hoan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.