From 04a7d552c75713153f9a915cd490ea3da0f66934 Mon Sep 17 00:00:00 2001 From: Morta303 Date: Mon, 22 Nov 2021 05:19:30 +0530 Subject: [PATCH 1/2] Added Pseudo Element Documentation --- .../CSS_Pseudo_Elements/Pseudo_Elements.md | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 Web_Development/FrontEnd/CSS_Pseudo_Elements/Pseudo_Elements.md diff --git a/Web_Development/FrontEnd/CSS_Pseudo_Elements/Pseudo_Elements.md b/Web_Development/FrontEnd/CSS_Pseudo_Elements/Pseudo_Elements.md new file mode 100644 index 0000000000..d011b60745 --- /dev/null +++ b/Web_Development/FrontEnd/CSS_Pseudo_Elements/Pseudo_Elements.md @@ -0,0 +1,83 @@ +# Pseudo-elements + +A CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-letter can be used to change the first letter of a paragraph. + +``` +/* This will change first letter of every

element to red color and font-size to extra xx-large. */ +p::first-letter { + color: red; + font-size: xx-large; +} +``` + + +**Note:** Instead of pseudo-elements, [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) can be used to style an element based on its *state*. + +## Syntax + +``` +selector::pseudo-element{ + property: value; +} +``` +You can use only one pseudo-element for a selector. It must appear after the simple selectors in the statement. + + +***Note:*** As a rule, double colons (::) are preffered instead of a single colon (:). This distinguishes pseudo-classes from psedo-elements.However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. + +## Index +Pseudo-elements defined by a set of CSS specifications include the following: + +A + + - ``` [::after (:after)]``` + + +B + + - ```[::backdrop]``` + - ``` [::before (:before)]``` + +C + + - ``` [::cue] ``` + - ``` [::cue-region ] ``` + +F + + - ``` [::first-letter(:first-letter)] ``` + - ``` [::first-line(:first-line)] ``` + - ``` [::file-selector-button(:first-letter)] ``` + + +G + + - ``` [::grammar-error] ``` + + +M + + - ``` [::marker] ``` + + +P + + - ``` [::part()] ``` + - ``` [::placeholder()] ``` + +S + + - ``` [::selection] ``` + - ``` [::slotted()] ``` + - ``` [::spelling-error] ``` + + +T + + - ``` [::target-text] ``` + + +## Refrence + +- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) +- [W3 School Docs](https://www.w3schools.com/css/css_pseudo_elements.asp) From a20e0484bb034cab620b8b8a15f55fdb217bf99d Mon Sep 17 00:00:00 2001 From: Morta303 Date: Tue, 30 Nov 2021 17:54:08 +0530 Subject: [PATCH 2/2] Added Pseudo Element --- .../CSS Pseudo_Element/CSS_Pseudo_Element.md | 106 ++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 Web_Development/FrontEnd/CSS Pseudo_Element/CSS_Pseudo_Element.md diff --git a/Web_Development/FrontEnd/CSS Pseudo_Element/CSS_Pseudo_Element.md b/Web_Development/FrontEnd/CSS Pseudo_Element/CSS_Pseudo_Element.md new file mode 100644 index 0000000000..7dbebab85c --- /dev/null +++ b/Web_Development/FrontEnd/CSS Pseudo_Element/CSS_Pseudo_Element.md @@ -0,0 +1,106 @@ +# Pseudo-elements + +**Pseudo-Element** is a property which when added to a selector gives you functionality to style a specific part of the selected element(s) differently. For example, ::first-letter element can be used to change the first letter of a paragraph. + +``` +/* This will change first letter of every

element to red color and font-size to extra large. */ +p::first-letter { + color: red; + font-size: xx-large; +} +``` + +CSS classes can also be used with pseudo-elements − +``` +selector.class:pseudo-element { + property: value +} +``` + + +**Note:** [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) are also used to style elements based on their *state*. + +## Syntax + +``` +selector::pseudo-element{ + property: value; +} +``` +You can use only one pseudo-element for a selector. It must appear after the simple selectors in the statement. + + +***Note:*** As a rule, double colons (::) are preffered instead of a single colon (:). This distinguishes pseudo-classes from psedo-elements.However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. + +## Index +Pseudo-elements defined by a set of CSS specifications include the following: + +A + + - ``` [::after (:after)]``` + + Use this element to insert some content after an element. + +B + + - ```[::backdrop]``` + - ``` [::before (:before)]``` + +Use this element to insert some content before an element. + +C + + - ``` [::cue] ``` + - ``` [::cue-region ] ``` + +This can be used to style captions and other cues in media with VTT tracks + +F + + - ``` [::first-letter(:first-letter)] ``` + - ``` [::first-line(:first-line)] ``` + - ``` [::file-selector-button(:first-letter)] ``` + +Use this element to add special styles to the first line/letter of the text in a selector. + + +G + + - ``` [::grammar-error] ``` + +Use this to represent a text segment which the user agent has flagged as grammatically incorrect + + +M + + - ``` [::marker] ``` + +Used for styling the stylistic marker of a list element + + +P + + - ``` [::part()] ``` + - ``` [::placeholder()] ``` + +Used represents the placeholder text in an or