CSS - ID Selectors

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 asdiv,p,section, etc.

Example

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

ID Selector with Pseudo-Classes

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

Example

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

Using ID Selector with Forms

CSS ID selector can be used withformsto design the form elements.

Example

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

ID Selector for Animations

CSS ID selector can be used withCSS animationsfor creating smooth animation effects.

Example

In this example, we have used an id selector to animate a bouncing ball. CSSkeyframesspecify the frame sequence andtranslateY()function of thetransformproperty to control the bouncing of the ball.

Id Selector with Transition

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

Example

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