Intro

In CSS, selectors are patterns used to target the element we need to style.

1.Simple Selectors

simple selectors targets things that are directly linked to HTML. Classes can be added to HTML elements, tag/elements selectors refer to HTML element tag names and the universal selector targets all HTML elements

2.Combinator Selectors

Combinator selectors allow us to combine many selectors into one selector pattern. They can be complex but are very useful in CSS.

simple selectors

1. CLASS
2. ID
3. TAG/ELEMENT
4. UNIVERSAL

Class

Class selectors allows us to create reusable style blocks, then apply them in our HTML. An element can inherit from multiple classes.

Class selectors always begin with a . character

.form-control{
/* Property pairings */
border: red 2px solid;
}

ID

An ID selector will target an HTML element that has a specific ID attribute applied.

ID selectors always begin with a # character

#root{
/* Property pairings */
border: red 2px solid;
}

TAG/ELEMENT

Tag selectors will target any HTML elements of a given tag or type. Their primary use case is to reset the default styling applied by browsers

Tag selectors will match the name of a specified HTML element

ul{
<li></li>
}

Universal

The universal selector will target all HTML elements. It's only real use case is to reset certain properties on all elements.

*{
/* property pairings */
}

Combinator Selectors

1. Chained

Chained

If we need to target a HTML element with multiple selectors then we can use the chained combinator syntax.

if we use this example HTML:

<p class="hero-paragraph main"></p>

To style the combination of both classes we will use chained syntax. this means that the .main class will only be applied when added to a hero-paragraph.

.hero-paragraph.main{
color:#fefefe;
}