Selectors In CSS

The first question is what is selectors and Why we need them?

CSS selectors are the patterns which helps to select the HTML Element which we want to style.

And Why we need them, Imagine you have the whole webpage and you want style it but you don’t know to how to select different different element in different color, font size or give them the background color this is when CSS selectors comes in the picture they helps us to select exact we want to style.

it combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector.

As we can see in above example it has selected h1 element from the html file.

There are five types of CSS selectors and there are listed below:

1. Universal Selectors

2. and selectors

3. combined selectors

4. inside an element selectors

5. sibling selectors

Lets see one by on how they works.

1.Universal Selectors (*):

1. The * universal selector selects all elements present in the HTML file like <p>,<h1>, <img>, <span> etc. This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

   

2.And selector (&):

If you want to target any specific elements together the you can use and selector. we need to use dot(.) between those elements to select them both.

In above example we can see that it has selected class with two properties that black background and white text so it will target both of them.

3.Combined selector (&):

As the name suggest it can combines more than one tags or elements from the file we can style at once. There is no need to create separate styling for each element in the file.

4.Inside an element selector:

This selector will select two element which are present in another element like hierarchy. It combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector.

5.Direct child selector:

In this we can target the child of an element we can target element inside an element inside an element like grandchild. > this sign is used to target the child.

6.Sibling selectors (~ , # , * ):

The sibling selector selects all elements that are next siblings of a specified element .We won’t see anyone using this selector in real life coding but its there in CSS.

• Class selector (.):

The .class selector selects elements with a specific class name. To select elements with a class, write a sing (.) character, followed by the name of the class.

In above example we have created three divs and inside of them three classes with different name but with same parent class so we can add styling to them.

• Id Selector (#):

The “#” CSS id selector is used to style the given id. The id attribute is the unique identifier in an HTML document. The id selector is used with a # character.

Before Selector ::

The ::before selector inserts something before the content of each selected element(s). Use the content property is very important to specify the content to insert Without content property it won't be run correctly.

In above example we can see the circle that is above the label name, because we used before selector that's why it came above the label.

After Selector ::

he ::After selector inserts something After the content of each selected element(s). Use the content property to specify the content .Content property is important in this selector also.

above example we can see the circle that is under the label name, because we used after selector that's why it came under the label.