` element in the HTML code has the class `button`, so the CSS rule is applied to it.
+
+## Summary
+
+Compound selectors are used to select elements based on multiple conditions. They are created by combining two or more simple selectors. Compound selectors allow you to target elements based on specific criteria, such as the presence of a class or an attribute. Compound selectors are more specific than simple selectors and less specific than complex selectors. They are useful for styling elements that meet specific criteria.
\ No newline at end of file
diff --git a/docs/css/selectors/pseudo-class-selectors.md b/docs/css/selectors/pseudo-class-selectors.md
index e69de29bb..458df6cad 100644
--- a/docs/css/selectors/pseudo-class-selectors.md
+++ b/docs/css/selectors/pseudo-class-selectors.md
@@ -0,0 +1,153 @@
+---
+id: pseudo-class-selectors
+title: Pseudo-Class Selectors
+sidebar_label: Pseudo-Class Selectors
+tags: [selector, pseudo-class]
+description: Pseudo-class selectors are used to style elements based on their state or position in the document.
+keywords:
+ [
+ pseudo-class selectors,
+ css pseudo-class selectors,
+ css selectors,
+ css pseudo-class,
+ ]
+sidebar_position: 6
+---
+
+In CSS, pseudo-class selectors are used to style elements based on their state or position in the document. Pseudo-class selectors are represented by a colon `:` followed by the name of the pseudo-class. Pseudo-class selectors allow you to style elements based on user interaction, such as hovering over an element, or based on the position of an element in the document tree, such as the first child of a parent element.
+
+Hover Over Me
+```
+
+:::info Additional Information
+- Pseudo-class selectors are represented by a colon `:` followed by the name of the pseudo-class.
+- Pseudo-class selectors are used to style elements based on their state or position in the document.
+- Pseudo-class selectors are less specific than ID selectors and more specific than element selectors.
+- Pseudo-class selectors can be combined with other selectors to create compound selectors.
+:::
+
+
+
+```html title="index.html"
+
+
+
+ Hover Over Me
+
+
+```
+
+
+```css title="index.css"
+button:hover {
+ background-color: lightblue;
+}
+```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+ e.target.style.backgroundColor = "lightblue"} onMouseOut={(e) => e.target.style.backgroundColor = ""}
+ >Hover Over Me
+
+
+
+In this example, the `button:hover` pseudo-class selector is used to change the background color of the button to `lightblue` when the user hovers over it. The button in the HTML code changes its background color to `lightblue` when the user hovers over it.
+
+Pseudo-class selectors are a powerful feature of CSS that allow you to style elements based on their state or position in the document. By using pseudo-class selectors, you can create interactive and dynamic styles for your web pages.
+
+## Related Resources
+
+- [CSS Pseudo-Classes - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
+- [CSS Pseudo-Classes - W3Schools](https://www.w3schools.com/css/css_pseudo_classes.asp)
+- [CSS Selectors - CSS-Tricks](https://css-tricks.com/almanac/selectors/)
+- [CSS Selectors Level 4 - W3C Specification](https://www.w3.org/TR/selectors-4/)
+- [CSS Selectors - Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
\ No newline at end of file
diff --git a/docs/css/selectors/pseudo-elements-selectors.md b/docs/css/selectors/pseudo-elements-selectors.md
index e69de29bb..14a1fdb6e 100644
--- a/docs/css/selectors/pseudo-elements-selectors.md
+++ b/docs/css/selectors/pseudo-elements-selectors.md
@@ -0,0 +1,139 @@
+---
+id: pseudo-elements-selectors
+title: Pseudo-Elements Selectors
+sidebar_label: Pseudo-Elements Selectors
+sidebar_position: 5
+tags:
+ [
+ pseudo-elements selectors,
+ css pseudo-elements selectors,
+ css selectors,
+ css pseudo-elements,
+ ]
+description: "Pseudo-elements selectors are used to style parts of an element that are not part of the document tree."
+keywords:
+ [
+ pseudo-elements selectors,
+ css pseudo-elements selectors,
+ css selectors,
+ css pseudo-elements,
+ ]
+---
+
+In CSS, pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document.
+
+` element:
+
+```css title="index.css"
+h1::first-letter {
+ font-size: 2em;
+ color: red;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `font-size: 2em` and `color: red` properties to the first letter of the text inside the `` element:
+
+```html title="index.html"
+Welcome to CSS
+```
+
+The first letter of the text "Welcome to CSS" will be styled with a font size of `2em` and a color of `red`.
+
+:::info Additional Information
+
+- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree.
+- Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element.
+- Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document.
+- Pseudo-elements selectors are used to create effects like drop caps, text underlines, and more.
+- Pseudo-elements selectors are less specific than class selectors and more specific than element selectors.
+- Pseudo-elements selectors are useful for adding decorative elements to text or styling specific parts of an element.
+- Pseudo-elements selectors can be combined with other selectors to create complex styles.
+- Pseudo-elements selectors are supported in all modern browsers.
+- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree.
+- Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text.
+
+:::
+
+ ` element:
+
+
+
+```html title="index.html"
+
+
+
+ Pseudo-Elements Selectors Example
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+```
+
+
+```css title="styles.css"
+p::first-line {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+In the above example, the CSS rule will apply the `font-weight: bold` and `font-size: 1.2em` properties to the first line of text inside the `
` element.
+
+