What are CSS Selectors?

A CSS selector is used to target the HTML elements which we want to style in our programs. We can say that it is the root part of the CSS without a Selector We can not apply properties to the HTML elements that make our code good-looking. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. Using CSS selectors will speed up our front-end life and make it far easier to edit code quickly.

How many types of selectors are There?

There are basically many types of selectors in CSS.

Universal Selectors:

Universal Selectors as the name suggests will apply to all the elements that are present in the CSS files. It is also known as Universal Selector. In Universal Selectors, we use the * sign to select all elements that are present in the CSS files. It is generally used to resetting the default values which are taken by the browser during the rendering of the webpage. Every browser has different values so to become it zero we should use the margin and padding and outline to 0.

Syntax

*{
    //Here we style elements
}

HTML

 <body>
 <h1>This is an Example of Universal Selector.</h1>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus non 
quisquam laborum tempora dicta vel exercitationemanimi commodi nesciunt 
consequatur!.</p>
 </body>

CSS

* {
  background: red;
  color: white;
  font-family: sans-serif;
}

h1 {
  text-align: center;
}
p {
  text-align: center;
}

Result

Class Selectors:

Class selectors are used to selecting all elements which belong to a particular class attribute. If we want to select a particular class from a file we use the . character to select that class of elements with the class selector. It will match and find the exact HTML elements based on the contents of the class attribute.

Syntax

.class {
    // CSS property
}

HTML

<body>
    <div class="Paragraph">
        <p>This is 1st Parapgraph</p>
        <p>This is 2nd Paragraph</p>
    </div>

    <div>
        <p class="Paragraph">This is 3rd Paragraph</p>
        <p>This is 4th Paragraph</p>
    </div>

</body>

CSS

.Paragraph{
    background: darkblue;
    color:white;
}

Result

ID Selectors:

The ID selector uses the ID attribute of an HTML element to select a specific element. The ID of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific ID, We write a hash (#) character, followed by the ID of the element.

Syntax

.idname{
    //We write style Properties here
}

HTML

<body>
    <div id="Paragraph">
        <p>This is a Paragraph</p>

    </div>

    <div>
        <p>This is another Paragraph</p>
    </div>

</body>

CSS

#Paragraph{
  color: orange;
}

Result

Type Selectors:

A type selector is also known as a tag name selector or element selector because it selects all elements that have the given node name. Example: input will match any element.

Syntax:

elementname {
//style your element
}

HTML

<body>
 <p>Lorem ipsum dolor sit amet <span>Type Selector</span> consectetur adipisicing elit.
     Consequuntur eius placeat esse necessitatibus possimus saepe voluptatibus atque dolores
      quasi illum?
    </p>
</body>

CSS

*{
  background-color: black;
  color:white;
}
span{
  color: green;
}

Result

Attribute Selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

Syntax

[attr] Represents elements with an attribute name of attr.

[attr=value] Represents elements with an attribute name of attr whose value is the exact value.
[attr~=value] Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is the exact value.

[attr|=value] Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
[attr^=value] Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
[attr$=value] Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
[attr*=value] Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
[attr operator value i]Adding i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
[attr operator value s] Experimental Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

Result

Group Selectors

The Group selector is used to select multiple elements at a time and style them together. These selectors make reduce the efforts by applying the common style for each element. To group multiple elements we use ',' followed by space.

Syntax

element1,element2{
//Write Code Here
}

HTML

<body>
 <h1>Tihs is an Example of Group Selector</h1>
 <h3>This is another Paragraph</h3>
 <p>This is a Paragraph.</p>
</body>

CSS

h1, p{
  background: violet;

}

h3,h1{
  color: darkblue;
}

Result

Pseudo Selectors:

Pseudo Classes:

The : pseudo allows the selection of elements based on state information that is not contained in the document tree. Example: a: visited will match all elements that have been visited by the user.

Syntax

selector:pseudo-class 
{
    // property: value;
}

Commonly used Pseudo Classes are:

: focus
: required
: checked
: disabled
: hover
: visited
: active

These Pseudo-classes are related to the location of an element within the document tree.

: root
: first-child
: last-child
: only-child
: nth-child(n)
: nth-last-child(n)
: not(selector)

Pseudo Elements::

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

Syntax

selector::pseudo-element 
{
  // property: value;
}

Commonly used Pseudo Classes are:

: :after
: :before
: :first-line
: :first-letter(:first-letter)
: :first-line(:first-line)
: :file-selector-button

Thanks for Reading this article I hope you enjoyed it a little bit if you then give some like to this article. Till then Bye sees you in the next Blog.

CSS Selector: Top selectors of CSS Development

A Detailed Guide on CSS Selector with some code snippets

Table of contents

What are CSS Selectors?

How many types of selectors are There?

There are basically many types of selectors in CSS.

Universal Selectors:

Class Selectors:

ID Selectors:

Type Selectors:

Attribute Selectors

Group Selectors

Pseudo Selectors:

Pseudo Classes:

Pseudo Elements::