Ash blog

CSS Selectors

CSS Selectors

Asha's photo
Asha
·

4 min read

Cascading Style Sheets (CSS)

  • CSS allows you to apply styles to web pages.
  • With the help of CSS, we design our website how we want.
  • CSS uses rule sets.

    What are CSS Selectors?

    CSS comprises style rules which consist of a selector and declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

CSS selectors are used to defining the elements you want to style.

The element or elements targeted by a CSS selector are referred to as the “subject of the selector”. A subject can be selected based on its element type, class, ID name, given attribute, or pseudo-state.

How to Use Selectors in CSS

You can have your HTML and CSS code in the same document.

You can also keep an HTML document labeled index.html and a CSS file labeled style.css.

style.css

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

index.html

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

Note:

The index file should include a line of code referencing the CSS file as shown below.

Types Of Selector

Universal Selector

If you want to select all the elements on a page then use Universal Selector. The asterisk (*) is the universal selector in CSS. However, it can be used with namespaces.

Syntax

 *  or *|*  -> matches all elements

ns|* -> matches all elements in the namespace ns

|*  -> matches all elements without any defined namespace

Example

<html lang="en">
<head>
    <title>Universal Selector</title>
    <style>
        *{
            color: orangered;
        }
    </style>
</head>
<body>
    <h2>Entire elements in this page will be affected </h2>
    <h3 class="notify">This text will also be changed</h3>
    <p>This text is inside paragraph, but still it will be in orange and red</p>
</body>
</html>

Output

image.png

Individual Selector

This selects all the HTML elements that have given a node name.

Individual Selector Syntax

element { style properties }

Class and ID Selector

A class selector selects all elements that have a given class name and an ID selector selects an element based on its ID attribute.

Class Selector Syntax

.classname { style properties }

ID Selector Syntax

#idname { style properties }

Example

<html lang="en">
<head>
    <title>Class and ID Selector</title>
    <style>
        .factClass
        {
            background-color: rgb(167, 241, 241);
            color: chocolate;
        }
        #factId
        {
            background-color: rgb(13, 20, 1);
            color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>
        <ul>
            <li class="factClass">This text has background color and text color</li>
            <li>Appears normal</li>
            <li id="factId">This text appears white in color</li>
        </ul>
    </h3>
</body>
</html>

And Selector (Chained)

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element then you can use and Selector

and Selector (Chained) Syntax

.classname.classname { style properties }

Combined Selector

If you have an element with the same style and you want to make apply the same CSS for more than one then you can combine them using Combined Selector.

Combined Selector Syntax

element1 , element2 { style properties }

Inside Element Selector

This selector is represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, etc.) element matching the first selector. In the below example changes will be done in the li tag which is inside ul which is present inside the div tag.

Inside Element Selector Syntax

element1 element2 element3 { style properties }

Direct Child Selector

The child combinator is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don't match.

Direct Child Selector Syntax

element1 > element2 { style properties } element1 – parent element2 -direct child

Sibling Selector

The sibling selector is placed between two CSS selectors. It matches only those elements matched by the second selector which is the next sibling element of the first selector.

Sibling Selector Syntax

element1 + element2 . class name + element

Pseudo-class Selector

A pseudo-class selector applies CSS to a selected element or elements only when in a special state. : hover -> will style an element only when a user hovers over it. You can also design for active, visited, and invalid.

Pseudo-class Selector Syntax

selector : pseudo-class { style properties }

Example

<html lang="en">
<head>
    <title>Pseudo Classes</title>
    <style>
        a: link {
            color: #0000ff;
        }
        a: :visited {
            color: #00ff00;
        }
        a:hover{
            color:#ff00ff;
        }
    </style>
</head>
<body>
    <p>You have already visited <a href="
        https://www.google.co.in">Google Website</a>Please check this website also 
        <a href="https://www.w3schools.com/">W3 School Website</a></p>
</body>
</html>

Output

image.png

Thanks for reading my article.

References blog.hubspot.com/website

iwritecodeineuron