Contents
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.
Ok, now we go.
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.
I. *
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
II. 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
III. 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
IV. 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
V. 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
VI. 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
VII. 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
VIII. 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
IX. X[propertie=”something”]
Demo: a[href=”https://alothemes.com”] { 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
X. X[propertie*=” something”]
Demo: a[href*=” alothemes.com”] { 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
- IE7+
- Firefox
- Chrome
- Safari
- Opera
These are common select sets, see you in the next article with other select sets that CSS offers.