CSS - ID Selectors

Quiz

ID Selectors in CSS

CSS ID selector selects a single element with a particular value for the id attribute. An id in CSS is denoted by the "#" (hash) symbol. The same class can be applied to multiple elements, but an id is unique for an element.

Syntax

The syntax for the CSS id selector is as follows:

#id {
    /* property: value; */
    color: #04af2f
}

ID Selector for Styling a div Element

CSS ID selector can be used to select various elements such as div, p , section, etc.

Example

In this example, we have used an ID selector to style the div element. We have used background-color, color, padding, border, and text-align properties to style and center the text in the div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #myId {
            background-color: #04af2f;
            color: white;
            font-size: 20px;
            font-family: Verdana, sans-serif;
            padding: 10px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="myId">
        This is a div element having various styles.
    </div>
</body>
</html>

ID Selector with Pseudo-Classes

CSS ID selector can be used with pseudo classes to add interactivity to the element such as changing text color on hovering any link.

Example

In this example, we have used hover pseudo-class to change the link text color upon hovering over it.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #myId {
        color: #04af2f;
        }

        #myId:hover {
            color: #031926;
        }
    </style>
</head>
<body>
    <a href="#" id="myId">
        Hover over this link to change its color.
    </a>
</body>
</html>

Using ID Selector with Forms

CSS ID selector can be used with forms to design the form elements.

Example

In this example, we have used an id selector on form elements like buttons and input fields. We have designed the input field and changed the appearance of the submit button.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #user {
            border: 2px solid black;
            border-radius: 5px;
            font-size: 16px;
            font-family: Verdana, sans-serif;
        }

        #btn {
            background-color: #031926;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="user" name="username" 
               placeholder="Enter your username">
        <br><br>
        <button type="submit" id="btn">Submit</button>
    </form>
</body>
</html>

ID Selector for Animations

CSS ID selector can be used with CSS animations for creating smooth animation effects.

Example

In this example, we have used an id selector to animate a bouncing ball. CSS keyframes specify the frame sequence and translateY() function of the transform property to control the bouncing of the ball.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        
        #animated {
            width: 100px;
            height: 100px;
            background-color: #04af2f;
            font-family: Verdana, sans-serif;
            text-align: center;
            line-height: 100px;
            color: white;
            border-radius: 50%;
            animation: bounce 1s infinite;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(20px);
            }
            50% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div id="animated">Bounce</div>
</body>
</html>

Id Selector with Transition

CSS ID selector can be used with CSS transition for creating a smooth transition from one state to another.

Example

In this example, we have used scale() function and background-color property to change the size and color of div box when hovered over it.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 100px;
            background-color: #04af2f;
            text-align: center;
            font-family: Verdana, sans-serif;
            line-height: 100px;
            color: white;
            border-radius: 10px;
            transition: all 0.5s ease;
            margin: auto;
        }
        #box:hover {
            background-color: #031926;
            transform: scale(0.95);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">Hover Over this div Element</div>
</body>
</html>

Print Page