When making interfaces with CSS, choosing a certain element is something we often encounter. Today I will introduce you to some selectors that are useful in the process of writing styles.
1. *
This icon is used to select an element on the page.
body * {
box-sizing: border-box;
}Many developers will use this trick to remove margin and padding. While this is a tool for quick testing, I would recommend never using it in the code of the end product. It adds too much burden to the browser and is unnecessary.
Compatibility: https://caniuse.com/?search=*
2. #X
This is a selector that allows us to select by id. It’s the easiest and most common to use, but use caution when using the id selector.
#identity{
width: 100%;
}Compatibility: https://caniuse.com/?search=%23
3. .X
Instead of selecting by id like the above selector, you can choose by class.
.class{
color: black;
}The difference between ids and classes is that, with class, you can select multiple elements. Use classes when you want your style to be applied to a group of elements. Alternatively, use id to find a unique element, and specify the style for that particular element.
Compatibility: https://caniuse.com/?search=.
4. X Y
When you need to be more specific with your selectors, then you should use this. For example, what if, instead of targeting all the link tags, you could simply target the links that are in an ordered list? Especially when you want to use a selector of child elements.
li a {
text-decoration: none;
}Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
What if you wanted to target all elements on a page, by their style, rather than an id or class name? Keep it simple, and use a style selector.
If you need to target all unordered lists, use ul {}.
a { color: red; }
ul { margin-left: 0; }Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X:visited và X:link
We use the :link pseudo-class to target all the link tags that have yet to be clicked.
In addition, we also have the :visited pseudo-class, which, as you can see, allows us to apply specific styles to only the link tags on the page that have been clicked on, or visited.
a:link { color: red; }
a:visted { color: purple; }Compatibility:
- IE7+
- IE7+
- Chrome
- Safari
- Opera
7. X + Y
This is an adjacent selector. It will only select the elements that are immediately after the previous element.
.select + p {
color: black;
}Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8. X > Y
The difference between the standard X Y and the X Y is that the latter will only select the direct child element.
div#container > ul {
border: 1px solid black;
}Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Safari