About CSS Selectors

Cascading Style Sheets (CSS) are used to style webpages. We can change the color, font size, background page color and many many more using the css style sheets.

Basic Syntax in html

We can add the style tag between the head and body tag of html and write the css code in this style tag.

CSS Selectors

Now let us learn in detail about the CSS Selectors

Universal Selectors

If the style has to be applied on the whole web page then use Universal Selectors. Sample Code

tip: Pick any color from UIColorPicker.com

Output

Individual Selectors

To address the change of style for any element in the web page then we should go for Individual selectors. For Ex: If we want to change the color of all the paragraphs in the web page just select the p tag and apply the changes.

Sample Code

Output

Class and ID Selectors

Each element in the html is given an unique name called ID. Group of elements can have same Class applied to create same styling.

To apply the styling for a Class in html we have to use dot(.) followed by class name, and to apply the style for an element in the html then we have to use # followed by the Id. Sample Code

Output

And Selectors (Chained Selectors)

In the below example, the style .danger.stop is called the And Selector or Chain selectors, this style will be applied only when the html element is provided with the classes danger and stop.

Hence the second li element which has defined its classes as danger and stop, so this li item will be applied with the background color thats provided in the style.

Output:

Combined Selectors

If we want to apply styles on the multiple elements instead of writing multiple times of same css code on different elements we can use combined selectors.

In the example given below, the same style has been applied to both the p and li elements.

output:

Inside an Element Selector

If we want to apply the style to the element which is inside other elements use this selector.

For example, if there is an element like this div>ul>li, then if we want to apply style to this li item use this selector.

output:

Direct child selectors

If there is a div that contains multiple children and sub-child elements but if we want to apply a style to an only direct child then we have to use direct child selectors

in the below scenario, apply the style only to the direct child li (but not to the direct child p)

Output:

Sibling ~ or + Selector

if we want to apply the style to the element which comes after the particular tag then then we have to use Sibling selectors.

Output:

Block and Inline Elements

Block : Block elements reserves its own space

Ex : <h1></h1> this is a block element, h1 reserves its own space

Inline elements: They can be inline with other elements

Ex: <h1><span></span></h1>

Pseudo Selectors:

Often Psuedo Selectors are represented by the colon(:) symbols

Lets talk about the real scenario:

To highlight an element when we hover on it we have to use :hover pusedo selectors

::Before and ::After

These elements works with double colons

the must properties when we use these selectors are content and display

output:

That's it for now, thanks for your time, talk to you in another blog.