CSS Selectors

CSS selectors are components of the CSS rule set, they are implemented for selecting the content of your web page you wish to style. CSS selectors choose elements in HTML based on the class, type, attribute, id etc.

Selectors are those names that you give to your different styles.
While creating a style, you define how each selector should work in terms of the size, color etc.

Below are a few basic types of selectors for CSS;

• CSS class selector
• CSS id selector
• CSS Universal selector
• CSS element selector.

---

Class Selectors

The CSS class selector selects the element to style based on it's specific class attribute. It is used with a dot symbol " . " followed by the class name.

.nameOfClass {
    CSS Declarations
              }

This is the general syntax for class selectors in CSS.
Below is an example of how it is applied.

.container {
    width: 360px;
    height: 420px;
    background: rgba(216, 190, 190, 0.6);
    color: #fff;
    position: center;
    top: 150px ;
    border-radius: 15px;
    box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8);
    margin:auto;
    position: relative;    
}

---

ID Selectors

The CSS ID selector selects the element to style based on it's specific ID attribute. Each id is unique to a page, so only one element is attached to one ID although it's possible to use the same ID for more than one element, but this isn't done because it's against the normal convention. The ID selector is used with a hash symbol " # " followed by the ID name.

#nameOfID {
    CSS Declarations
              }

This is the general syntax for ID selectors in CSS.
Below is an example an ID selector applied with a login form.

#login-form {
    background-color: #FFFFFF;
    height: 400px;
    width: 400px;
    margin: 7em auto;
    border-radius: 1.5em;
    box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8)
}

---

Universal Selectors

The CSS Universal selector is used to select all the elements on the page. It is used with an asterisk symbol " * ".

* {
    css declarations;
}

This is the general syntax for Universal selectors, in this case it'll point to all elements on the page.

div * {
     font-family: sans-serif;
}

Here it selects all the elements within the div tag and sets the font to sans-serif.

---

Element Selectors

The Element selector selects the HTML elements by name.

element {
    CSS Declarations
}

Comments

[luis065]

Good article about some HTML feature to master if you usually work with. BTW, I think you have a mistake in the image example for ID selector. It should appear #nameOfID instead of .nameOfID, right?

[Richie Moluno]

ohh, thanks for the correction, i'll make necessary correction