Today I will be back with part 2 of the series “Tip and trick CSS”. In part II, I will introduce you to the Selectors included in CSS, hopefully the article will help you learn and work with CSS.

You have learned CSS basic select select selectes such as ID: ‘#’ and Class: ‘.’. And you think that’s enough? So you missed out on the more flexible levels of CSS Selectors, which will help you be much more productive.

1. *

Demo: * {  margin: 0;  padding: 0; }

This selector will help you select all the components that are on the page. Many programmers use this trick to remove the default margin and padding.

And it can also be used for child select select sets

Demo: body * {  margin: 0;  padding: 0; }

Compatible

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. X

Demo: a {  color: red; } table {  border: 1px solid red; }

This selector will select the entire site by their tag name. For example, when you need lists (ul) that don’t have the same order you can use as follows:

Demo: ul {  List-style: none; }

Compatible

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. X Y

Demo: div a {  color: red; }

This can be considered one of the most popular select sets in the process of css making. It allows you to call the child members that are inside the parent. However, consider when calling the following: X Y Z A.err, then you are making redundancy, consider calling the parent parts, and question whether it is redundant or not.

Compatible

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X:visited and X:link

a:link {  color: red; } a:visted {  color: red; }

Here, :link will select to the entire link card when they have not been clicked. And vice versa :visited will allow all cards that have been clicked or accessed.

Compatible

• IE7+
• Chrome
• Safari
• Opera

5. X + Y

Demo: div + p {  color: red; }

This is the adjacent selecter, it will select the adjacent p card immediately after the div card. And also means that only the p card immediately after that div card is red.

Compatible

• IE7+
• Firefox
• Chrome
• Safari
• Opera

6. X > Y

Demo: div.container > table {  border: 1px solid red; }

This selecter will select only the nearest child or live child tag, which means that there will only be a table tag closest to the valid div tag of the border attribute.

For this reason, this selecter is recommended to use when writing JavaScript.

Compatible

• IE7+
• Firefox
• Chrome
• Safari

7. X ~Y

Demo: ul ~ p{  color: red; }

This selecter is almost similar to X + Y, but it is more stringent. This means that all cards immediately after the ul tag will be selected.

Compatible

• IE7+
• Firefox
• Chrome
• Opera

8. X[propertie]

Demo: a[title] {  color: red; }

This selector will select according to the attributes of the tag, for example, a[title], which selects the link tags with the title attribute.

Compatible

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X[propertie=”something”]

Demo: a[href=”https://magepow.net”] {  color: red; }

This selector will select tags with links to https://alothemes.com and other links will not be affected.
Note: you can also use other properties such as data, title, … with different values to choose from.

Compatible

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[propertie*=” something”]

Demo: a[href*=” magepow.net”] { color: red; }

This will serve the rigidity of the upper selector, instead of having to enter a value, we can enter a value, and tags with attributes containing the string we transmit in quotation marks will all be selected.

Compatible

• Opera
• IE7+
• Firefox
• Chrome
• Safari

These are common select sets, see you in the next article with other select sets that CSS offers.

If your website is having problems, please leave a comment below or contact us at Magepow Contact, the Magepow technician team will assist in solving your problem quickly. Thanks.

Hope this article will helpful for you!