CSS selectors and Pseudo-classes

Table of contents

No heading

No headings in the article.

A brief about CSS CSS stands for Cascading Style sheets. It is a style sheet language that helps to give an excellent look to a web page with the help of HTML. There are many selectors in CSS which allow us to target the elements that we specifically want to give a different look and these selectors help to achieve them. And the selectors are as follows.

Universal selector A Universal selector is a selector that helps to select all the elements at once. For example, the Background colour of a webpage.

Screenshot 2022-11-13 at 11.06.20 PM.png

Individual selector An Individual selector is a type of selector that helps to select an individual element of a webpage like a paragraph, Heading or list.

individual selector.png

Class and Id selector A class selector helps to target a class of an element and all the elements will get a style which has the same class value. And it is denoted by a dot(.).

class.png

Id selector Id selector is used for targeting a particular and unique Id. And generally, there is only one Id on a webpage but we can put as many Ids as we want. But it's not good to put a lot of Ids on a webpage because Id's have a unique value. So, it's better to keep one Id. And it is denoted by #.

id.png

And or Chained selector It is a selector where we target two classes at once. We can add more classes if we want.

chained.png

Combined Selector A combined Selector is used for two elements or more to have the same style.

combined.png

Inside an element Inside an element refers that it targets the parent element and its children and sub-child.

inside.png

Direct Child Direct child refers to the direct connection between the elements. It targets the element in a hierarchy order. For example, Parents>child>sub child

direct child.png

Sibling Sibling selector is not very common and it is not used often. A sibling selector can be used by using a '+' sign. If we target an element and apply a sibling selector then the right next element will get styled.

sibling.png

Pseudo Classes Pseudo classes are used to add styles to the selectors. Like, if we want to hover something before an element then we'll write :hover::before and if we want something to hover after then we'll write :hover::after

::before

Screenshot 2022-11-14 at 12.43.44 AM.png

::after

after.png

#iwritecode