SELECTORS

There are five main selectors of CSS:

SIMPLE SELECTOR
COMBINATOR SELECTOR
ATTRIBUTE SELECTOR
PSEUDO CLASS SELECTOR
PSEUDO ELEMENT SELECTOR

1. SIMPLE SELECTOR

A "simple selector" in CSS refers to the most basic way to target an HTML element for styling. It can be one of the following:

Type Selector: Targets all elements of a specific type (e.g., div, p, h1).
Class Selector: Targets elements with a specific class (e.g., .class-name).
ID Selector: Targets a specific element with a given ID (e.g., #id-name).
Universal Selector: Targets all elements on the page (e.g., *).

Example of Simple Selectors

BY TAG NAME

For example, styling all <p> tags:

<style>
p {
  color: blue;
}
</style>

<body>
    <p>I am a paragraph</p>
    <div>I am a div tag</div>
</body>

BY CLASS

For example, styling elements with a specific class:

<style>
.example-class {
  color: red;
}
</style>

<body>
    <div class="example-class">I am a div with class "example-class"</div>
</body>

BY ID

For example, styling an element with a specific ID:

<style>
#unique {
  color: green;
}
</style>

<body>
    <div id="unique">I am a div with ID "unique"</div>
</body>

UNIVERSAL SELECTOR

For example, styling all elements:

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

<body>
    <p>This is a paragraph.</p>
    <div>This is a div.</div>
</body>

The universal selector (*) targets all elements on the page and sets their margin and padding to zero, providing a consistent layout across different browsers.

GROUPING SELECTOR

The "grouping selector" in CSS allows you to apply the same styles to multiple selectors, separated by a comma. This helps reduce redundancy in your code.

GROUPING SELECTOR EXAMPLE:

For example, applying the same style to both <h1> and <p> tags:

<style>
h1, p {
  color: purple;
}
</style>

<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>

In this example, both the <h1> and <p> elements are styled with the same font and color. The h1, p selector groups the two elements together.

2. COMBINATOR SELECTOR

Combinator selectors in CSS allow you to select elements based on their relationships with other elements.

PARENT CHILD RELATIONSHIP

<div>
    <p>Immediate sibling.</p>
    <p>Direct child.</p>
    <span>
      <p>Indirect child.</p>
    </span>
</div>

<p>Immediate sibling.</p>
    <p>General sibling.</p>

DESCENDENT SELECTOR ( )

The descendant selector targets an element that is inside another element, regardless of how deep inside it is.

<style>
div p {
  color: blue;
}
</style>

<div>
  <p>This is a paragraph inside a div element.</p>
</div>

DIRECT CHILD SELECTOR (>)

The direct child selector selects elements that are immediate children of another element.

<style>
div > p {
  color: red;
}
</style>

<div>
  <p>This is a direct child paragraph.</p>
  <div>
    <p>This is not a direct child paragraph.</p>
  </div>
</div>

IMMEDIATE OR ADJACENT SIBLING SELECTOR (+)

The adjacent sibling selector selects an element that is immediately preceded by a specified element.

<style>
h1 + p {
  color: green;
}
</style>

<h1>Heading 1</h1>
<p>This paragraph is immediately after an h1 element.</p>

GENERAL SIBLING SELECTOR (~)

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

<style>
h1 ~ p {
  color: orange;
}
</style>

<h1>Heading 1</h1>
<p>This is a sibling of h1.</p>
<p>This is another sibling of h1.</p>

3. ATTRIBUTE SELECTOR

The attribute selector in CSS targets elements with a specific attribute or attribute value.

<body>
<p class="ptag">I am a paragraph with a class attribute</p>
<p id="ptag">I am another paragraph with an id attribute</p>
</body>

Tag Name[Attribute Name]

This targets elements that have a specified attribute, regardless of the attribute's value.


p[class] {
  background-color: blue;
}

Tag Name[Attribute="Value"]

This targets elements where the attribute has an exact value.


p[class="ptag"] {
  background-color: red;
}

Prefix Value Selector (^=)

This targets elements where the attribute value starts with a specific prefix.


div[class^="div"] {
  background-color: blue;
}

Suffix Value Selector ($=)

This targets elements where the attribute value ends with a specific suffix.


div[class$="container"] {
  background-color: green;
}

Substring Value Selector (*=)

This targets elements where the attribute value contains a specific substring.


div[class*="content"] {
  background-color: yellow;
}

Whitespace-Separated Value Selector (~=)

This targets elements where the attribute value is a whitespace-separated list and one of the values matches exactly.


div[class~="container"] {
  background-color: pink;
}

4. PSEUDO CLASS SELECTOR

Pseudo-classes are used to define the special state of an element.

Common Pseudo-Classes

:hover - Targets an element when the mouse hovers over it.

<style>
a:hover {
  color: red;
}
</style>

<a href="https://example.com">Hover me</a>

:focus - Targets an element when it receives focus, typically on form fields.

<style>
input:focus {
  border-color: blue;
}
</style>

<input type="text">

:active - Targets an element when it is being clicked.

<style>
button:active {
  background-color: gray;
}
</style>

<button>Click me</button>

:first-child - Targets the first child element of a parent.

<style>
div p:first-child {
  color: green;
}
</style>

<div>
  <p>This is the first paragraph</p>
  <p>This is the second paragraph</p>
</div>

:nth-child(n) - Targets the nth child of a parent.

<style>
ul li:nth-child(2) {
  color: red;
}
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

5. PSEUDO ELEMENT SELECTOR

Pseudo-elements allow you to style specific parts of an element.

Pseudo-elements are used to style specific parts of an element, such as the first letter or line of text, or to insert content before or after an element.

Common Pseudo-Elements

::first-letter - Targets the first letter of a block-level element.

<style>
p::first-letter {
  font-size: 2em;
  color: red;
}
</style>

<p>This is a paragraph.</p>

::first-line - Targets the first line of a block-level element.

<style>
p::first-line {
  font-weight: bold;
  color: blue;
}
</style>

<p>This is a paragraph with multiple lines. The first line will be styled differently.</p>

::before - Inserts content before an element.

<style>
p::before {
  content: "Note: ";
  color: green;
}
</style>

<p>This is a paragraph.</p>

::after - Inserts content after an element.

<style>
p::after {
  content: " - End";
  color: gray;
}
</style>

<p>This is a paragraph.</p>

::selection - Targets the portion of an element that is selected by the user.

<style>
::selection {
  background-color: yellow;
  color: black;
}
</style>

<p>Select this text to see the effect.</p>