CSS Selectors and Pseudo-Elements

What is CSS?

CSS stands for Cascading Style Sheets.CSS describes how the HTML elements are to be displayed on the screen.CSS beautify your web page.using CSS we can change the color, background color, font, size, border and lot more of the element.

CSS Selectors:

CSS selectors are used to find the element whose property will be set. Also css are used to target the HTML elements. CSS selectors make it easy for us to easily target single/multiple HTML elements in the Markup.

Following are the different types of css selectors,

• Universal Selectors: It is used to change the properties like font, color, background color etc of entire HTML elements.

Result:

• Individual selector: In this if we select a element which colud be p tag, div tag, li tag etc and apply properties then wherever this selected tags are present the properties which we have applied is applicable on this all tags.

Result:

• Class and Id Selectors:

• Class selectors: class selector can be applied to several elements on a single page. class selector starts with a dot (.) character. It will select everything in the document with that class applied to it.

Result:

• Id Selectors: ID selector begins with a #. ID can be used only once per page, and elements can only have a single id value applied to them.

Result:

• Combined selectors: We can select multiple element and apply various properties. we have to use ( , ) character is used to combine tags or element.

Result:

• Direct child selector: To target a specific tag which is inside of other tag we use direct child method.

Result:

• Sibling Selector: This type of selector is used to target sibling of the element or tag. + is used to target next single sibling. ~ targets all of the sibling tags with same tag name given.

Result:

Pseudo-selectors:

Pseudo selector is a keyword added to a selector that specifies a special state of the selected elements. For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

• ::after: The ::after pseudo-element can be used to insert some content after the content of an element.

• ::before: The ::before pseudo-element can be used to insert some content before the content of an element.

Result:

Thanks for reading..