# Selector

If you've got some text that you only want to be larger and red if it's the first paragraph of an article, how do you do that?

<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>

article p:first-of-type {
color: red;
font-size: 1.5em;
}

1- # Universal selector
* {
color: hotpink;
}
This rule causes every HTML element on the page to have hotpink text.

2- Class selector
The value of a class attribute can be almost anything you want it to be. One thing that could trip you up, is that you can't start a class (or an ID) with a number, such as .1element.
.red {
border: 1px solid blue;
}
<div class="red"></div>

3- ID selector
#rad {
border: 1px solid blue;
}
<div id="rad"></div>

4- Grouping selectors
strong,
em,
.my-class,
[lang] {
color: red;
}
5- Attribute
Square brackets [] are used for attribute simple selectors.
input [type=”text”] {
background-color: #444;
width: 200px;
}
<input type="text">

6- General Sibling Combinator:
h2 ~ p {
margin-bottom: 20px;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class=”box”>
<p>Paragraph example.</p>
</div>

7- Adjacent Sibling Combinator:
p + p {
text-indent: 1.Sem;
margin-bottom: 0;
}
must be an immediate sibling, not just a general sibling.

8- Pseudo-classes
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}

9- Pseudo-element
Pseudo-elements differ from pseudo-classes because instead of using a single colon (:), we use a double colon (::).

li::marker {
color: red;
}

10- Type selector
A type selector matches a HTML element directly.
/* Apply All <section> elements. */
section { padding: 2em;}
/* Apply All <a> elements. */
a { color: red;}