• Skip to primary navigation
  • Skip to main content

  • Home
  • Tutorials
    • Computer Tutorial
    • Internet Tutorial
    • Windows Tutorial
    • Android Tutorial
    • MS Office
      • MS Word Tutorial
      • MS Excel Tutorial
      • MS PowerPoint Tutorial
    • HTML Tutorial
    • CSS Tutorial
    • WordPress Tutorial
    • Blogger Tutorial
    • MS Paint Tutorial
    • WordPad Tutorial
    • Notepad Tutorial
    • Paytm Tutorial
    • WhatsApp Tutorial
  • How To
  • Articles
  • Career Guide
  • Video Tutorials
  • Books
  • Courses

CSS pseudo-element Property क्या हैं पूरी जानकारी हिंदी में?

अंतिम सुधार September 27, 2018 लेखक TP Staff

इस Tutorial में हम आपको CSS pseudo-element Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

List of Content

  1. CSS Pseudo Element Property का परिचय – Introduction to CSS Pseudo Element in Hindi.
  2. Pseudo Element Property General Syntax in Hindi
  3. Complete List of Pseudo Elementes in Hindi
  4. Pseudo Element vs pseudo-class in Hindi
  5. आपने क्या सीखा?

CSS Pseudo Element Property का परिचय

CSS द्वारा प्रत्येक HTML Element को Target किया जा सकता हैं. और pseudo-class Property द्वारा तो Elements की Specific Stages को भी Target किया जा सकता हैं.

मगर CSS Class, IDs या फिर अन्य Selectors के द्वारा हम किसी Element के Part विशेष को Target नही कर सकते हैं.

तो CSS ने इसका समाधान दिया – CSS Pseudo Element. CSS Pseudo Elements द्वारा Elements के Part विशेष को Target किया जा सकता हैं और Document Tree में अनुपस्थित (Undefined) Elements भी Define किये जा सकते हैं.

Pseudo Element द्वारा किसी Element की पहली लाईन, पहला अक्षर, Element के बाद कोई Content, Element के पहले कोई Image आदि को Define और Style किया जा सकता हैं.

Pseudo Element Property General Syntax

Pseudo Elements को HTML Elements की तरह Define नही किया जाता हैं. चुंकि यह एक CSS Property हैं इसलिए इस Pseudo Elements को CSS के Syntax के अनुसार Define किया जाता हैं. Pseudo Elements का General Syntax नीचे दिया जा रहा हैं.

selectors::pseudo element {property: values;}

Pseudo Elements का Syntax कुछ-कुछ Pseudo Class के Syntax के समान होता हैं.इन दोनों के Selector में सबसे बडा अंतर Colon : संख्या का होता हैं.

Pseudo Element को Selector के बाद लिखा जाता हैं. इन दोनों को Double Colon Marks :: से अलग किया जाता हैं. Pseudo Element को pseudo-class से अलग करने के लिए इसमे Double Colon का इस्तेमाल किया जाता हैं.

Note:- CSS3 में Double colon को Introduce किया गया हैं. मगर सभी Browsers द्वारा Single Color Separator को Support किया जाता हैं.

Complete List of Pseudo Elements

Pseudo Element की संख्या Element के Parts की संख्या के हिसाब से बनाई गई हैं. फिलहाल तो सिर्फ 5 Pseudo Elements को Introduce किया गया हैं. लेकिन, इनकी संख्या बढाने पर विचार किया जा रहा हैं.

नीचे हम आपको Currently Available Pseudo Elements के बारे में बता रहे हैं.

::first-letter

::first-letter Pseudo Element का इस्तेमाल Text के पहले अक्षर पर Special Style Apply करने के लिए किया जाता है. इस Element को केवल block-level Elements पर ही Apply किया जा सकता हैं.

::first-letter Pseudo Element के साथ font Property, color, background, margin, padding, border, text-decoration, text-transform, line-height, float, clear आदि CSS Properties को Declare किया जा सकता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS ::first-letter Pseudo Element Example</title>
<style type=”text/css”>

p::first-letter {
font-size:65px;color:orange;
}

</style>
</head>
<body>

<p>First Paragraph. The first letter of this paragraph is bigger than the other letters.;/p>
<p>Second Paragraph. The first letter of this paragraph is bigger than the other letters.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

First Paragraph. The first letter of this paragraph is bigger than the other letters.

Second Paragraph. The first letter of this paragraph is bigger than the other letters.

::first-line

::first-line Pseudo Element द्वारा Element Text की पहली लाईन पर Special Style Apply की जाती हैं. इस Element को भी केवल block-level Elements पर ही Apply किया जा सकता हैं.

::first-line Pseudo Element के साथ font Property, color, background,word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear आदि CSS Properties को Declare किया जा सकता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS ::first-line Pseudo Element Example</title>
<style type=”text/css”>

p::first-line {
text-decoration:underline;color:orange;
}

</style>
</head>
<body>

<p>First line of first paragraph. The first line of this paragraph is underlined and has a different color.;/p>
<p>First line of second paragraph. The first line of this paragraph is underlined and has a different color.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

First ne of first paragraph. The first line of this paragraph is underlined and has a different color.

First line of second paragraph. The first line of this paragraph is underlined and has a different color.

::after

::after Pseudo Element का इस्तेमाल पहले से Defined Elements के Content के पीछे कुछ और Content Add करने के लिए किया जाता हैं. Content यानि Text और Image दोनों को इस्तेमाल किया जा सकता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS ::after Pseudo Element Example</title>
<style type=”text/css”>

p::after {
content:”*”;
}

</style>
</head>
<body>

<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

First Paragraph. *

Second Paragraph. *

::before

::before Pseudo Element का इस्तेमाल पहले से Difined Elements के Content के आगे मतलब पहले कुछ और Content Add करने के लिए इस्तेमाल किया जाता हैं. यहाँ भी Text और Image दोनों को Use कर सकते हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS ::before Pseudo Element Example</title>
<style type=”text/css”>

p::before {
content:”=”;
}

</style>
</head>
<body>

<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

= First Paragraph.

= Second Paragraph.

::selection

जब Element Content को Mouse द्वारा Select किया जा रहा हो तब Selected Content को Style करने के लिए इस Element का इस्तेमाल किया जाता हैं. इस Element के साथ color, background, font आदि CSS Properties को Define किया जा सकता हैं.

इसे Try कीजिए

<!DOCTYPE html>
<html>
<head>
<title>CSS ::selection Pseudo Element Example</title>
<style type=”text/css”>

::selection {
background-color: blue; color:white
}

</style>
</head>
<body>

<p>First Paragraph.</p>
<p>Second Paragraph.</p>
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

First Paragraph.

Second Paragraph.

इसे Test करने के लिए ऊपर बने दोनों पैराग्राफ को माउस दवारा सेलेक्ट कीजिए.

Pseudo Element और pseudo-class में मुख्य अंतर

Pseudo Element और pseudo-class के बीच अक्सर Confusion आ जाती है. खासकर नये Developers तो इन दोनों CSS Properties को समझने में गलती करते ही हैं. इसलिए इन Confusion को दूर करने के लिए हम इन दोनों Properties के बीच उपलब्ध मुख्य अंतर को बता रहे हैं.

  • Pseudo Element का इस्तेमाल Element Content के किसी Specific Part को Target करने के लिए किया जाता हैं. जैसे; first-letter, first-line आदि.
  • जबकि pseudo-class द्वारा Elements की Specific Stages को Target किया जाता हैं. जैसे; Mouse Hover, Focus आदि.
  • Pseudo Elements द्वारा Document Tree से अनुपस्थित (Undefined) Elements को भी Target कर सकते हैं. जैसे; after, before आदि.
  • लेकिन, pseudo-class से सिर्फ Document Tree में समाहित नही होने वाले Elements को Target कर सकते हैं. नये Elements Define नही कर सकते है.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Pseudo Element Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की Pseudo Elementes के नाम और उनके उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

About TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Join TutorialPandit on Telegram
Use Filmora video editor to express your creativity and amaze with beautiful results.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy