From 81fcc415dd28f2d5a7c9134dcf50889bcc636037 Mon Sep 17 00:00:00 2001
From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com>
Date: Mon, 10 Jun 2024 08:55:05 +0530
Subject: [PATCH 1/4] Create Pseudo-class-and-Pseudo-elements.md
---
.../Pseudo-class-and-Pseudo-elements.md | 167 ++++++++++++++++++
1 file changed, 167 insertions(+)
create mode 100644 docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
diff --git a/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
new file mode 100644
index 000000000..3c0aa8e44
--- /dev/null
+++ b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
@@ -0,0 +1,167 @@
+# Pseudo Classes
+
+Pseudo-classes are used to define the special states of an element. They are typically prefixed with a colon (`:`).
+
+
+1. `:hover` : Applies when the user designates an element (with a pointing device), but does not activate it. Often used to change the appearance of a button when the mouse pointer is over it.
+
+```css
+button:hover {
+ background-color: lightblue;
+}
+```
+
+
+
+
+
+
+
+2. `:focus` : Applies when an element has received focus (e.g., when clicked on or tabbed to).
+
+```css
+input:focus {
+ border-color: blue;
+}
+```
+
+
+
+
+
+
+3. `:nth-child(n)` : Matches elements based on their position in a group of siblings.
+
+```css
+li:nth-child(2) {
+ color: green;
+}
+```
+
+
+
+
Red
+
Green
+
BLue
+
+
+
+
+
+4. `:first-child` : Applies to the first child of its parent.
+
+```css
+.container div:first-child {
+ color: blue;
+ font-weight: bold;
+}
+```
+
+
+
+
Hello
+
World
+
+
+
+
+5. `:nth-of-type(n)` : Matches elements based on their position among siblings of the same type.
+
+```css
+div:nth-of-type(3)
+{
+ color: red;
+}
+```
+
+
+
Hello
+
World
+
!
+
+
+
+# Pseudo Elements
+
+1. `::before` : Inserts content before an element's actual content.
+
+```css
+p::before {
+ content: "Note: ";
+ font-weight: bold;
+}
+```
+
+
+
+
+
+
+3. `::first-line` : Applies styles to the first line of a block-level element.
+
+```css
+p::first-line {
+ color: red;
+ font-weight: bold;
+}
+```
+
+
+
You are Amazing!
+
+
+
From 3b183b49697260468c60596be4bda91f4842ac92 Mon Sep 17 00:00:00 2001
From: AmrutaJayanti <142327526+AmrutaJayanti@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:56:26 +0530
Subject: [PATCH 2/4] Update Pseudo-class-and-Pseudo-elements.md
---
.../CSS/css-basics/Pseudo-class-and-Pseudo-elements.md | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
index 3c0aa8e44..8b2336ea6 100644
--- a/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
+++ b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
@@ -1,4 +1,10 @@
-# Pseudo Classes
+---
+id: pseudo-class-and-pseudo-elements
+title: Pseudo class and Pseudo elements
+sidebar_label: Pseudo class and Pseudo elements
+tags: [css, introduction, web development, markup language, hyper text, web pages, career opportunities, personal growth, web-development, web design, web pages, websites, career opportunities, contribute to the web, stay relevant, express yourself, learn other technologies, have fun,pseudo classes,pseudo elements]
+description: In this tutorial you will learn about Pseudo classes and Pseudo elements in CSS
+---
Pseudo-classes are used to define the special states of an element. They are typically prefixed with a colon (`:`).
@@ -103,7 +109,7 @@ div:nth-of-type(3)
-# Pseudo Elements
+## Pseudo Elements
1. `::before` : Inserts content before an element's actual content.
From 8c90ba4872849aaa24ded02953cbd28f75b9b822 Mon Sep 17 00:00:00 2001
From: Ajay Dhangar <99037494+Ajay-Dhangar@users.noreply.github.com>
Date: Mon, 10 Jun 2024 21:41:27 +0530
Subject: [PATCH 3/4] Update Pseudo-class-and-Pseudo-elements.md
---
.../Pseudo-class-and-Pseudo-elements.md | 72 ++++---------------
1 file changed, 14 insertions(+), 58 deletions(-)
diff --git a/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
index 8b2336ea6..805700b65 100644
--- a/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
+++ b/docs/CSS/css-basics/Pseudo-class-and-Pseudo-elements.md
@@ -19,11 +19,11 @@ button:hover {
-
+
@@ -59,9 +59,11 @@ li:nth-child(2) {
BLue
@@ -76,15 +78,15 @@ li:nth-child(2) {
```
-
+
Hello
World
@@ -97,18 +99,6 @@ div:nth-of-type(3)
}
```
-
-
Hello
-
World
-
!
-
-
-
## Pseudo Elements
1. `::before` : Inserts content before an element's actual content.
@@ -120,17 +110,6 @@ p::before {
}
```
-
-
Drink More Water
-
-
-
2. `::after` : Inserts content after an element's actual content.
```css
@@ -140,17 +119,6 @@ p::after {
}
```
-
-
Drink More Water
-
-
-
3. `::first-line` : Applies styles to the first line of a block-level element.
```css
@@ -159,15 +127,3 @@ p::first-line {
font-weight: bold;
}
```
-
-
-