CSS Selectors

Used to target and apply styles to specific HTML elements on a web page.
CSS selectors allow you to define rules that determine which elements should receive a particular style.
THere are 4 selectors use din css
  1. Universal Selector (*)
  2. Type Selector
  3. Class Selector (.classname)
  4. ID Selector (#idname)

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Selectors Example</title>
        <style>
            div.content p {
                margin: 10px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>Content Styled</p>
        </div>
        <div class="content">
            Content Unstyled
        </div>
        <p class="content">
            Content Unstyled
        </p>
        <p>
            Content Unstyled
        </p>
    </body>
</html>
Run

Universal Selector (*)

Targets all elements on the page.
Rarely used due to its broad scope.
Syntax: * { margin: 0; padding: 0; }

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Universal Selector Example</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div>
            Content Styled
        </div>
        <p>
            Content Styled
        </p>
    </body>
</html>
Run

Type Selector

Targets elements of a specific HTML tag.
Syntax: p { font-size: 16px; }

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Type Selector Example</title>
        <style>
            p {
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div>
            Content Styled
        </div>
        <p>
            Content Styled
        </p>
    </body>
</html>
Run

Class Selector (.classname)

Targets elements with a specific class attribute.
Class names start with a dot (.) followed by the class name.
Syntax: .highlight { background-color: yellow; }

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Class Selector Example</title>
        <style>
            .highlight {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="highlight">
            Content Styled
        </div>
        <p id="highlight">
            Content Styled
        </p>
    </body>
</html>
Run

ID Selector (#idname)

Targets a single element with a specific ID attribute.
ID names start with a hash (#) followed by the ID name.
Should be unique within the page.
Syntax: #header { color: blue; }

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Class Selector Example</title>
        <style>
            #header {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="header">
            Content Styled
        </div>
        <p id="header">
            Content Styled
        </p>
    </body>
</html>
Run

Quick Recap - Topics Covered

Element

Description

Example

Universal Selector (*)

Targets all elements on the page.

Run

Type Selector

Targets elements of a specific HTML tag.

Run

Class Selector (.classname)

Targets elements with a specific class attribute.

Run

ID Selector (#idname)

Targets a single element with a specific ID attribute.

Run

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK