DEV Community

Mahalakshmi C
Mahalakshmi C

Posted on

CSS Selector

#css #html

What are CSS Selectors?

CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them

Type of CSS selector

Element Selector:

  • Selects all elements with the same HTML tag. 
button {
    background-color: green;
    color: white;
    padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Class Selector:

  • The class attribute is used to group multiple HTML elements.

  • You can apply the same CSS style to all elements that have the same class name.

  • In CSS, the class selector is represented by a dot (.).

.title {
    color: green;
}
Enter fullscreen mode Exit fullscreen mode

ID Selector:

  • The id attribute is used to identify one unique HTML element.

  • Each id value should be used only once on a page.

  • In CSS, the ID selector is represented by a hash (#).

#logo {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Group Selector

  • The Group Selector is used to apply the same CSS style to multiple selectors.

  • It is represented by a comma (,).

h2, p {
    margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Universal Selector

  • The Universal Selector selects all HTML elements on the page.

  • It is represented by the * symbol.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

HTML Code

<body>

    <h1 id="logo">My Website</h1>

    <h2 class="title">Welcome</h2>

    <p class="title">This is my first paragraph.</p>

    <button>Login</button>
    <button>Sign Up</button>

</body>
Enter fullscreen mode Exit fullscreen mode

output:

Top comments (0)