What is role of CSS Selector?

• It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

• CSS selectors are used to find the HTML elements you want to style.

We can divide CSS selectors into five categories

1.Simple selectors (select elements based on name, id, class).

/* Its Select All paragraph tag */
/* It select all element same like  eg. <p>, <h> and <div> etc.*/
p {
  text-align: center;
  color: red;
}

/* for id tag we use `#` sign*/
#id{
  text-align: center;
  color: #383CC1;
}

/* for class tag we use `.` dot*/
.LCO{
  text-align: center ;
  color: #3DBE29;
}

2. Combinator selectors (select elements based on a specific relationship between them).

There are four different combinators in CSS:

i. Descendant Selector.

• The descendant selector matches all elements that are descendants of a specified element.

• The following example selects all <p>elements inside <div> elements.

div p {
  background-color: #35BDD0;
}

ii. Child selector (>)

<style>
div > p {
  background-color: #5DA3FA;
}
</style>

<p>The child selector (>) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>

iii. Adjacent Sibling Selector (+)

• The adjacent sibling selector is used to select an element that is directly after another specific element.

• Sibling elements must have the same parent element, and "adjacent" means "immediately following".

• The following example selects the first <p> element that are placed immediately after <div> elements:

<style>
div + p {
  background-color: skyblue;
}
</style>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>

iv. General Sibling Selector (~)

• The general sibling selector selects all elements that are next siblings of a specified element.

• The following example selects all <p> elements that are next siblings of <div> elements:

<style>
div ~ p {
  background-color: #03203C;
}
</style>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

3.CSS Pseudo-classes.

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it.

• Style visited and unvisited links differently.

• Style an element when it gets focus.

<style>
/* unvisited link */
a:link {
  color: #35BDD0;
}

/* visited link */
a:visited {
  color: #00D84A;
}

/* mouse over link */
a:hover {
  color: #FF6666;
}

/* selected link */
a:active {
  color: #1B98F5;
}
</style>

<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

4.CSS Pseudo-elements

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

• Note: The ::first-line pseudo-element can only be applied to block-level elements.
• The following properties apply to the ::first-line pseudo-element:

<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

5.Attribute selectors

It is possible to style HTML elements that have specific attributes or attribute values.

• CSS [attribute] Selector the [attribute] selector is used to select elements with a specified attribute.

• The following example selects all elements with a target attribute:

<style>
a[target] {
  background-color: #1B98F5;
}
</style>

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.mrdecoders.hashnode.dev">Our Blog</a>
<a href="https://web.learncodeonline.in/" target="_blank">LCO</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>