CSS Selector

HTML element are known as selectiors in css, at which a style will be applied.

The element/type selector:
To give a color to all level 1 headings.
h1 {
  color: #36cfff;
  background-color: red;
  letter-spacing: 2em;
}
The class selector

 The class selector indicated with a period(.) symbol at the beginning of the selector.

Example to apply a property to all element of the same class attribute.

.class {
color: #000000;
margin: 3em;
background-color: silver;
}
The id selector

The id selector indicated with a # symbol at the beginning of the selector.

Example to apply a property to all element of the same id attribute.

#id {
color: #ffffff;
margin-top: 2px;
border: red;
}
The universal selector

The universal selector (*) matches the name of any element type.

* {
border: 2px solid red;
}
The descendent selectors

A descendent selector targets elements that are contained within another element.

ui em {
color: #000;
letter-spacing: 2em;
padding: 1px;
}
Grouping selector

 Apply a style to many selector. Separated by commas (,).

h1,h2,h3,h4 {
color: green;
font-weight: normal;
letter-spacing: 5em;
text-transform: lowercase;
margin: 3em;
}
Child selector

A child selector is similar to descendent selector. It target only the direct children of a given element.

ui> em {
color: red;
font-weight: noromal;
margin: 2em;
}
Next-sibling selectors

A next-sibling selector targets an element that comes directly after another element with the same parent, indicated with a plus (+) sing.

h2 + p { color: blue;}

Leave a Reply