What is CSS?

CSS stands for Cascading Style Sheets. CSS is a style sheet language not a programming language like HTML. CSS is used to style the HTML elements on the web page, which means decorating the web page with a certain font, color, background color, positions and much more. CSS describes how HTML elements should be displayed. CSS simplifies the process of making web pages presentable.

CSS Selectors

A CSS Selector is used to select the HTML elements that we want to style. There are different types of selectors in CSS.

1. Basic Selectors

2. Grouping Selectors

3. Attribute Selectors

4. Combinators

5. Pseudo-classes

6. Pseudo-elements

Basic Selectors

• Universal Selector

Universal Selector is denoted with Asterisk ( * ). it is used to select all the HTML elements on our web page.

Syntax:

*{
property: value;
}

• Individual Selector

Individual Selector is used to select the specific HTML element based on the element name.

Syntax:

selector{
property: value;
}

• id Selector

The id Selector is used to select the HTML elements that are specified with the id attribute. It is denoted by ( # ). The id attribute specifies a unique id for an element.

Syntax:

#id {
property: value;
}

• class Selector

The class Selector is used to select the HTML elements that are specified with the class attribute. It is denoted by ( . ). The class attribute specifies one or more class names for an HTML element.

Syntax:

.class{
property: value;
}

• element.class Selector

The element.class Selector is used to selecting only the specified elements with the specified class attribute.

Syntax:

selector.class{
property: value;
}

Grouping Selectors

• Combined Selector

The Combined Selector is used to select all the HTML elements that are mentioned. The mentioned HTML elements are separated by the ( , ).

Syntax:

selector1, selector2 {
property: value;
}

Attribute Selectors

• [attribute] Selector

The [attribute] Selector is used to select all the HTML elements that are mentioned by the specific attribute.

syntax:

selector[attribute]{
property: value;
}

• [attribute="value"] Selector

The [attribute="value"] Selector is used to select the HTML elements that are mentioned by the specified attribute with the exact value attribute.

Syntax:

[attribute="value"]{
property: value;
}

• [attribute~="value"] Selector

The [attribute~="value"] Selector is used to select the HTML elements with attribute value containing a space-separated list of words, one of which is exactly the value.

Syntax:

[attribute~="value"]{
property: value;
}

• [attribute|="value"] Selector

The [attribute|="value"] Selector is used to select the HTML elements with attribute value having a common word of value attribute followed by a hyphen (-).

Syntax:

[attribute|="value"]{
property: value;
}

• [attribute^="value"] Selector

The [attribute^="value"] Selector is used to select the HTML elements with attribute value having a common word of the value attribute.

Syntax:

[attribute^="value"]{
property: value;
}

• [attribute$="value"] Selector

The [attribute$="value"] Selector is used to select the HTML elements whose attribute value end with the mentioned word.

Syntax:

[attribute$="value"]{
property: value;
}

• [attribute*="value"] Selector

The [attribute*="value"] Selector is used to select the HTML elements with attribute value having a mentioned word of the value attribute.

Syntax:

[attribute*="value"]{
property: value;
}

Combinators

• Descendant Selector

The descendant selector is used to select all the HTML elements that are descendants of a specified element. It is represented by space( ).

Syntax:

selector1 selector2{
property: value;
}

• Child Selector

The child selector is used to select the HTML elements that are the children of a specified element. It is represented by (>).

Syntax:

selector1>selector2{
property: value;
}

• General Sibling Selector

The general sibling selector is used to select all the HTML elements that are the next siblings of a mentioned element. It is represented by (~).

Syntax:

selector1~selector2{
property: value;
}

• Adjacent Sibling Selector

The adjacent sibling selector is used to select the HTML element those are immediately followed by the mentioned element. It is represented by (+).

Syntax:

selector1+selector2{
property: value;
}

Pseudo-class Selectors

A Pseudo-class Selector is used to specify a special state of the HTML elements.

Syntax:

selector:pseudo-class{
    property: value;
}

The most commonly used Pseudo-class selectors are as follows

• :hover

This selector helps the user to select the HTML element when the user holds the mouse pointer on it.

Syntax:

selector:hover{
property: value;
}

• :visited

This selector helps the user to select the links when they are visited.

Syntax:

selector:visited{
property: value;
}

• :link

This selector helps the user to select the links when they are unvisited.

Syntax:

selector:link{
property: value;
}

Example for :visited & :link pseudo-class elements is

• :focus

This selector helps the user to select the HTML elements that are focused.

Syntax:

selector:focus{
property: value;
}

• :nth-child(n)

This selector helps us to select every HTML element that is the nth child of its parent. Here the default value of the keyword n is 1. We can use any keyword here like even, odd, n+1, 2n+1 anything.

Syntax:

selector:nth-child{
property: value;
}

• :first-child

This selector helps us to select every HTML element that is the first child of its parent.

Syntax:

selector:first-child{
property: value;
}

• :last-child

This selector helps us to select every HTML element that is the last child of its parent.

Syntax:

selector:last-child{
property: value;
}

Pseudo element Selector

The Pseudo element Selector allows us to style the specific part of the mentioned HTML elements.

Syntax:

selector:pseudo-element{
    property: value;
}

The most commonly used pseudo-elements are

• ::before

The ::before selector is used to insert something before the content of the HTML element.

Syntax:

selector::before{
property: value;
}

• ::after

The ::after selector is used to inserting something after the content of the HTML element.

Syntax:

selector::after{
property: value;
}

• ::selection

The ::selection selector is used to styling the HTML elements that are selected by the user.

Syntax:

selector::selection{
property: value;
}

• ::first-letter

The ::first-letter selector is used to style every first letter of the specified HTML element.

Syntax:

selector::first-letter{
property: value;
}

• ::first-line

The ::first-line selector is used to styling every first line of the specified HTML element.

Syntax:

selector::first-line{
property: value;
}

Example:

---

Thanks for reading my article. Have a good day :-)