Selectors In CSS

CSS

CSS stands for Cascading Style Sheets. This language is used to style the webpage, styling is a significant property which enhances the look of the website and Makes it easy to interact with the user.

Mainly We Can Write CSS in 3 Ways

1) Inline CSS :

In This, we write the CSS property Inline with the HTML element In the body Section Of the HTML.

<p style="color: #42f135"; > Inline CSS </p>

2) Internal CSS :

in this, we write the CSS Property inside the CSS <style> element in the head section of the HTML file.

<html lang="en">
<head>
      <title>Selector</title>
      <style>
            h1 {
                  color: rgb(211, 18, 112);
                }
     </style>
</head>
<body>
   <h1> Internal CSS </h1>
</body>
</html>

3) External CSS :

In this, we will write all the CSS properties by targeting the HTML element and that file is linked with help of <link> tag.

<html lang="en">
<head>
        <title>Selector</title>
<link rel="stylesheet" href="style.css">
    </head>
<body> 
  <h1> External CSS </h1>
 </body>

CSS file which is linked( style.css)

h1 {
color: rgb(211, 18, 112);
}

What is a selector?

The simple rule set of CSS is first we have to select the element & style them according to the required properties and values.

Syntax : selector{ property: value; }

The selector is used to select or target an HTML element once we select the element we can style it by assigning the values to various CSS properties (like background colour, font etc)

Some Commonly Used Selectors Are :

Universal Selectors :

The Universal Selector is used to select everything. it is useful for applying style to all HTML elements. it is denoted by an asterisk (*).

Syntax : *{ property: value;}

Individual Selector :

This Selector is used to target a specific type of element individually like p, h1, etc

Syntax : elementname{ property: value }

Class and Id Selector :

Class Selector: The Class selector selects the HTML element with a specific class attribute. In CSS to use this selector, we have to use dot(.) followed by the class name. The class can be used multiples time specifying the same class name.

Syntax : .classname { property: value; }

Id Selector: The Id selector will pick the HTML element that has a unique Id attribute, we use Hash(#) followed by Id name. Id is uniquely used only to select unique elements.

Syntax : #idname { property : value;}

Chained Selector :

It is also known as And selector, it allows us to select the element with more than one class attribute. it is used by combining 2 or more selectors in a way that it will able to target the HTML element for which both the selector as to be true.

To use this selector we have to write both the selector without any space between them.

Syntax : .Selector1.Selector2

Combined Selector :

To apply the same set of CSS Style To several HTML elements, classes and ids this combined selector is used. we use them by using comma(,) Inbetween Selctors. This Majorly Prevents the duplication of CSS code

Syntax : selector1, selector2, selector3 {property: value; }

Inside An Element :

This is also called a descendant Selector. By using this we can select all the child elements inside the element( not a specific element). ie: we can target all child elements which are present in the parent element

Syntax : parentelement childelements { property : value; }

Direct Child Selector :

This selector is used to target the Direct child element of the Parent element. this is done by using the greater than (>) sign.

Syntax : Selector1 > Selector2

Sibling Selector :

There are 2 types of Sibling Selector

Adjacent Sibling Selector (+)
General Sibling Selector(~)

Adjacent Sibling Selector ( + ) : In this we will Styles only one element Which is right next to the targeted element. The one which is after + sign.

Syntax : Selector1 + Selector2

General Sibling Selector (~) : In this We will Style/Target the elements which are after the selected element, ~ is the sign.

Syntax : Selector1 ~ Selector2

Pseudo Selector

:: before selector

With the help of ::before pseudo selector, you can insert some content before the content of an element.

::after selector

With the help of ::after pseudo selector, you can insert some content after the content of an element.

:hover Pseudo-class -

With the help of the hover pseudo-class, we can add special effects to an element when the mouse pointer is over it.

That's It In this Article. In the next Article, we will go through CSS Positions.

Thank you Hitesh Choudhary sir Anurag Tiwari sir & Anirudh Jwala Sir For making us a Better Version of Ourself.