Understanding CSS Selectors
So you want to learn CSS selectors?
If you want to be good at styling web pages then you should grasp CSS selectors. I’ve learned Id, Class, descendant selectors and I thought I was good to go and then after few days I’ve realized that they are more CSS selectors that will make my coding life even simpler.
what are CSS Selectors and why should you care?
CSS selectors are just patterns to select the element that you want to style. The main theme of CSS is for applying styles for web elements to make a web page look good and even more readable.
Let’s dive into the topic!
- *
*{
margin : 0;
border :2px solid red;
}An asterisk (“*”) is used to denote a CSS universal selector.
what is CSS universal Selector?
It will select all the elements on the web page and it will apply styles to all of them.
Example:-
Compatibility:-
- Opera
- IE6+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
- Baidu Browser
2. #
#box{
width : 200px;
height:200px;
background : red;
}A hash(“#”) is used to denote an Id selector and it will proceed with a string of characters which is defined by the developer. The id should be unique for the entire web page that means you are not allowed to assign an id selector for multiple elements.
why Id should be unique even though styles are getting applied for multiple elements?
- Suppose if you want to manipulate a specific element by selecting Id attribute in javascript then you won’t get an expected outcome because it has a duplicated Id.
- The code will not be validated by W3C, that means if you try your code validates with W3C rules it will through an error and also you will end up with compatibility issues across different browser.
Example:-
Compatibility:-
- Opera
- IE6+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
- Baidu Browser
3. .(class selectors)
.box{
width : 200px;
height:200px;
background : red;
}A dot(“.”) is used to denote a class selector and it will proceed with a string of characters which is defined by the developer. It is almost like Id selector but the only difference is we can use class selectors for multiple elements in a page which will share the same CSS styles.
Example:-
Compatibility:-
- Opera
- IE6+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
- Baidu Browser
4. X(Type Selector)
li{
color:red;
background:yellow;
font-size:16px;
}What if you want to select an element which is all same types? In that case, we can use type selectors to apply styles for example in the above code we selected li type so it will affect all li elements in web page.
Example:-
Compatibility:-
- Opera
- IE6+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
- Baidu Browser
5.Descendant Selectors
.box a{
colo :red;
}what if you want to more specific for selecting elements on the web page.For example in the above code, I applied styles for anchor elements inside a box class element that means it will affect only anchor elements inside a box class element.
Example Demo:-
Compatibility:-
- Opera
- IE6+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
6.Adjacent Selectors
div + p {
background:whitesmoke;
color:pink
}Adjacent selectors are nothing but it will select an element that immediately follows the first element. For example in the above code styles will be applied for the first paragraph after the div element.
Example Demo: -
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
- QQ Browser
7. A > B
div > p{
color:red;
}It will select all p elements which are direct children of div.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
8. A~B
div ~ p{
color:green;
}This is a sibling combinator which is almost like A + B selector but in adjacent selectors, we can select only one element which is that immediately follows the first element. But div ~ p, in this case, it will select all the p elements as long as they follow the div element.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
9. Attribute Selectors
a[target]{
color:red;
}Attribute selectors are used to selecting an element with a specific attribute. For example, in the above code it will select all anchor tags that have a target attribute.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
10. Y:link and Y:visited
a:link{
color:red;
}
a:visited{
color: purple;
}:visited pseudo-class is used to target all anchor tags which has been clicked or visited;
:link pseudo-class is used to target all anchors which have not been clicked yet.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
11.A[href = “anything”]
a[href="medium.com"] {
color:red; /*red color*/
}For example in the above code styles will be applied to the anchor tag which is having a link to “medium.com” in this case red color will be applied to the anchor tag.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
12. a[href*= “medium”]
a[href*="medium"]{
color:orange;
}What if you want to select an anchor tag which has value somewhere appear in the link. In that case, we can use the above syntax to select that anchor tag.
Make sure that you are using an asterisk(“*”) symbol before equal signs.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
13.a[href^=“http”]
a[href^="http"]{
color:green;
}what if you want to select an anchor tag that starts with the desired value that you want. For example in the above styles will be applied to the anchor tag which link starts with “http” value.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
14. a[href $= “image.jpg”]
a[href $= "image.jpg"]{
color:orange;
}what if you want to select an anchor tag that ends with the desired value that you want. In the above example styles will be applied to the anchor tag which ends with .jpg.
Make sure that you are using a dollar(“$”) symbol before equal signs.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
15. a[filetype = “image”]
a[filetype = "image"]{
color:green;
}Just imagine if you want to select an image which is having different formats then you have to write CSS for different formats. In order to avoid that we can create the same custom attribute for all the image anchor tags and we can use that.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
16. :active
a:active { color: yellow; }What if you want to differentiate between the active link and non-active link? The active link nothing but that is activated by the user by clicking the link.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
17. :visited
a:active { color: red; } It will select all the visited links. The :visited represents links that already visited by the user.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
18. :hover
a:hover { background:pink; color:violet } What if you want to change or apply the styles for the element while hovering? In that case, we can use :hover pseudo-class for activate styles.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
19. :any-link
:any-link{
color:red;
}It will select all the elements(links) on the web page which is having a “href” attribute for example, <a>,<area>
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
20. :checked
input:checked + div{
color:purple;
background:pink;
}This :checked pseudo-class is very useful to find the state of the elements like radio buttons, checkbox and select — option.What if you want to apply styles only if the element was checked? In that cases, this pseudo-class will be very handy.
Example Demo:-
Compatibility:-
- Opera
- IE7+
- Firefox
- Chrome
- Safari
- Edge
For now, that’s it folks I will add more CSS selectors(like :nth selectors) soon.
If you like this article don’t forget to give a clap(Pro tip: It’s free).
