CSS Selector - What is CSS Selectors ?

What is CSS Selectors ? CSS Selectors

We can select the HTML element you want to style By using Selector. It could be any tag like <h1>, paragraph,<title> etc.

There are different types of CSS Selectors are there, they are

Element Selector.
ID Selector.
Class Selector.
Universal Selector.
Attribute Selector.
Group Selector.
Pseudo-Class Selector.
Pseudo-Element Selector.

Let’s understand each topic.

1.CSS Element Selector:

The element selector in css selects HTML elements based on the element name (or tag) for example h1, div, span, table etc.

Consider below example to understand about Element selector.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>
        Welcome to fullstackadda.com
    </h1>
    <p class="paragraph">
        The blog that is decided to help people who wants to learn and code. And grab Job Opportunities.
    </p>

</body>

</html>

h1 {
    color: Green;
    font-size: 50px;
    text-align: center;
}

p {
    color: white;
    background-color: black;
}

OUTPUT:

2.CSS ID Selector:

ID attribute is a unique element in the entire page. By using id selector we select the id attribute of an HTML element to select a specific element.

ID attribute written in hash character (#), followed by the id of the element.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 id="heading">
        Welcome to fullstackadda.com
    </h1>
    <p class="paragraph">
        The blog that is decided to help people who wants to learn and code. And grab Job Opportunities.
    </p>

</body>

</html>

#heading{
    color: red;
    background-color:yellow;
    text-align: center;
}
p {
    color: white;
    background-color: black;
}

OUTPUT:

NOTE: In the about code the ID of h1 tag is #heading.

3.Class Selector:

The CSS class selector selects HTML elements with a specific class attribute. To use class selector you must use ( . ) followed by class name in CSS.

Example:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <h1 class="text">Fullstackadda.com</h1>
    <p class="text">Learn to code</p>
  </body>
</html>

.text {  
    text-align: center;  
    color: red;  
    background-color: lightblue;
}

OUTPUT:

4.Universal Selector:

By using universal selector we can access the entire HTML document. The Universal selector select all the elements in a HTML document by using (*) .

Example:

* {
  color: blue;
  background-color: yellow;
  text-align: center;
}

NOTE: HTML code is same that we used in Class Selector.

OUTPUT:

Overview:

Some common use cases for CSS selectors include:

Styling specific elements: You can use CSS selectors to target specific elements on your page, such as headings, paragraphs, or images, and apply styles to them.
Applying styles based on element attributes: CSS selectors can also be used to target elements based on their attributes, such as their class, ID, or data attributes. This allows you to apply styles to specific elements with certain attributes.
Targeting child and descendant elements: CSS selectors can be used to target child and descendant elements within a parent element, such as targeting all list items within an unordered list.
Styling based on element state: CSS pseudo-classes allow you to style elements based on their state, such as when they are being hovered over or when they are in a certain state, such as checked or unchecked.
Styling based on element position: CSS selectors can be used to style elements based on their position in the document, such as targeting the first or last child of an element, or targeting elements that come before or after a specific element.
Responsive design: CSS media queries allow you to apply styles based on the size of the screen or the device being used to view your page, making it easier to create responsive designs that look great on any device.