We use Css to beautify our webpages and make it visually appealing.
These Webpages could be styled in three ways i.e external, internal and inline Css. To begin with internal css , we need to add <style> </style> tag in the head of the html document.
Css could be used externally by creating a file with .css extension. And to connect this css file to Html file we need to give <link rel="stylesheet" href="style.css">
Css selectors are patterns that are being used to add Css properties to the targeted Html elements for styling web pages.
There are various css selectors And we will be having a look at these selectors with an example Where My mom has given me an endless shopping list. So come with me on a grocery Run!
### Universal Selector :
Universal selector selects the whole document i.e the css properties are applied to all the html elements. It is written as
*{ css properties } Here I have applied a background colour to the whole
document. Individual Selector :
This individual selector allows you to choose HTML elements based on their element tags, such as p, li, h1, div, h2, etc.
syntax:(any tag/element){
css properties
}
Class and Id Selector :
Class selectors matches only those elements which have the class applied to it. Class selector is written as . preceding the name of class selector.
Id Selector on the other hand matches those elements or tags which has id applied. It is written as # preceded by the id selector.
Here in the example we can see .fruit selects all the elements inside the div class which gives background colour as orange and #greens selects all the elements from div id which outputs its background colour as green.
note: Class can be given same class name multiple times to any element but Id could be given only once as it is uniquely identified. So any element that has an id attribute is supposed to have a unique value for it.
Chained Selector :
While making the shopping List my Mom told me to bring Cabbage and Spring Onion without Fail.
So we will added a class "important" to these veggies .As these veggies are both Leafy and
Important we can use Chained Selector. Through this we can Target such veggies which are leafy as well as important. We use . in chained/ and selector.
Combined Selector :
Again Mom told me to highlight the notes mentioned in the list. By using combined Selector we can give css styles to two or more elements at the same time. It can be used by simply putting a , after the html element. So for highlighting the notes we used Combined selector.
Inside Selector :
In the shopping list , Mom also told to bring flowers. So I wrote these flowers in pink by using inside selector. Inside selector selects that element which is inside various other elements. It just uses space after each element.
Direct Child :
Direct Child itself directs to the element which immediately comes 'next' after any element. For eg. my mom told me to buy some medicine from pharma store without fail. To target this Text i used Direct child selector.
Sibling Selectors :
The sibling selector selects all elements that are next siblings of a specified element. Example I went for shopping and bought all the add ones except soap. So I highlighted it using sibling selector so I don't forget to buy the soap. Sibling selectors uses + and ~ symbol.
Pseudo Before Selector:
This ::before will create a pseudo element before the selected target in order to add the content at that place. We will use content keyword in pseudo element. We can also add required content before or after using these pseudo elements. To add more fun to my shopping list I used emojis before veggies and fruits heading. For that I made two classes and assigned the pseudo before selector to it.
Pseudo After Selector :
This ::after will create a pseudo element after the selected target in order to add the content next to it. We will use content keyword in order for adding some content. We can add required content before or after using these pseudo elements. Here I wanted to mark those veggies which I have bought. So by using Pseudo After Class selector I selected those elements and dropped the green tick emoji after the veggies which has been already bought
Hey you know what, I successfully completed my grocery run and bought all the items mentioned in the list. And while doing this I also learned this amazing Css Selectors!