{"id":114265,"date":"2023-07-08T11:29:13","date_gmt":"2023-07-08T05:59:13","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=114265"},"modified":"2024-07-26T21:03:20","modified_gmt":"2024-07-26T15:33:20","slug":"css-pseudo-elements","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/","title":{"rendered":"CSS Pseudo Elements"},"content":{"rendered":"<p>In this article, you will learn about CSS Pseudo Elements. Let&#8217;s start with what is CSS Pseudo Elements.<\/p>\n<h3>What are CSS Pseudo Elements?<\/h3>\n<p>When a keyword is applied to a selector, you can style a particular area of both the individual samples using CSS pseudo-elements.<\/p>\n<p>When a keyword is applied to a selector, it creates a CSS pseudo-element that allows you to design a particular area of the chosen element (s). For instance,::first-line may be used to alter the font of a paragraph&#8217;s first line.<\/p>\n<p>A term that is utilised with a selector to specify the unique status of the selected items is known as a pseudo-class. In contrast to pseudo-classes, that are employed to style the entire element, quasi are used to style a certain portion of an element.<\/p>\n<p>For instance, the very first letter or line of the an element can be styled using a pseudo-element. The content can be be added before or after an element using the pseudo-elements.<\/p>\n<p>To style certain areas of an element, use a CSS pseudo-element. It can be utilized for instance to:<\/p>\n<ul>\n<li>The element&#8217;s initial letter or line in style<\/li>\n<li>Add content either before or after an element&#8217;s content.<\/li>\n<\/ul>\n<p>Pseudo-elements are possibly one of the most profound elements of CSS as pseudo-elements enable the developer to change certain sections of an element without necessarily changing the HTML code. This is especially important when optimizing visually appealing designs of web pages while maintaining clean semantic HTML at the same time.<\/p>\n<p><strong>The pseudo-element syntax:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector::pseudo-element {\r\nproperty: value;\r\n}<\/pre>\n<h3>Classes and pseudo-elements in CSS<\/h3>\n<p>To style the exact element that has that class, the quasi can be used in conjunction with CSS classes. This serves as an illustration of a CSS class-based pseudo-element.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align: center;\r\nfont-size: 30px;\r\n}\r\nh1.example::first-letter {\r\ncolor: rgb(255,0,242);\r\nfont-size: 2cm;\r\nfont-family: Lucida Calligraphy;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 class=\"example\"&gt; DataFlair &lt;\/h1&gt;\r\n&lt;h1 style=\"color:blue\"&gt; Hello World!!! &lt;\/h1&gt;\r\n&lt;h3&gt; This serves as an illustration of a CSS class-based pseudo-element.&lt;\/h3&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/classes-and-pseudo-elements-in-css.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114288\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/classes-and-pseudo-elements-in-css.webp\" alt=\"classes and pseudo elements in css\" width=\"1920\" height=\"849\" \/><\/a><\/p>\n<p>In this case, through the utilization of pseudo-elements, designers are in a better position of coming up with more elaborate interfaces. They allow you to add design elements like initial caps or your own tags for the list items but without introducing more HTML. This also enhances the maintainability of codes and helps simplify the html and other related files.<\/p>\n<p>Singular colon (:) syntax is used in CSS1 and CSS2 for the both pseudo-elements and pseudo-classes. For backward compatibility, CSS1 and CSS2 pseudo-elements can use the single colon syntax.<\/p>\n<p>While there are a number of CSS pseudo-elements, we will focus on some of the most popular ones. These are the most popular CSS pseudo-elements listed:<\/p>\n<ul>\n<li><strong>selection:<\/strong> It is employed to pick the portion of an item that the user has chosen.<\/li>\n<li><strong>first-line:<\/strong> The text&#8217;s opening line is styled.<\/li>\n<li><strong>first-letter:<\/strong> It chooses the text&#8217;s first letter.<\/li>\n<li><strong>after:<\/strong> It is employed to add something following the content of the element.<\/li>\n<li><strong>before:<\/strong> It is employed to insert something prior to the content of the element.<\/li>\n<li><strong>marker:<\/strong> Pseudo-element chooses the list item&#8217;s marker box, which frequently has a punch or numeral. Any component or psuedo intellectual that is set to display can use it: list-items like the &lt;summary&gt; and &lt;li&gt; components<\/li>\n<\/ul>\n<h3>Selection Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;selection Demo&lt;\/title&gt;\r\n&lt;style&gt;\r\nbody{\r\nbackground-color: whitesmoke;\r\ntext-align: center;\r\nfont-size: 20px;\r\n}\r\nh1\r\n{\r\ncolor: rgb(255,0,242);\r\nfont-size: 45px;\r\n}\r\nh2\r\n{\r\ncolor: blue;\r\n}\r\np::selection{\r\ncolor:brown;\r\nbackground-color: #ffe996;\r\nfont-size: 30px;\r\n}\r\n::selection{\r\ncolor: #ffe996;\r\nbackground-color: brown;\r\nfont-size: 30px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;::selection element&lt;\/h2&gt;\r\n&lt;p&gt;Content in this paragraph turns red with\r\ngreen background on selection.&lt;\/p&gt;\r\n&lt;span&gt;As this is not a paragraph, you can notice red\r\nbackground and green text on selection.&lt;\/span&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/selection-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114289\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/selection-pseudo-element.webp\" alt=\"selection pseudo element\" width=\"1920\" height=\"847\" \/><\/a><\/p>\n<h3>First-line Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align: center;\r\n}\r\nh1::first-line {\r\nfont-family: Lucida Calligraphy;\r\nfont-size: 3cm;\r\ncolor: #a71a9f;\r\ntext-shadow: 5px 8px 9px #14d7d2;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt; DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt; Here is an illustration of the first-line pseudo-element. &lt;\/h2&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/first-line-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114290\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/first-line-pseudo-element.webp\" alt=\"first line pseudo element\" width=\"1916\" height=\"855\" \/><\/a><\/p>\n<h3>First-letter Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align: center;\r\n}\r\nh1::first-letter {\r\nfont-family: Lucida Calligraphy;\r\nfont-size: 4cm;\r\ncolor: #a71a9f;\r\ntext-shadow: 5px 8px 9px #14d7d2;\r\n}\r\nh1{\r\ncolor: green;\r\nfont-size: 2cm;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt; DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt; Here is an illustration of the::first-letter pseudo-element.&lt;\/h2&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/first-letter-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114291\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/first-letter-pseudo-element.webp\" alt=\"first letter pseudo element\" width=\"1920\" height=\"847\" \/><\/a><\/p>\n<h3>After Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody\r\n{\r\ntext-align: center;\r\n}\r\nh1::after {\r\ncontent: \"\\01F525\";\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 style=\"color:rgb(255,0,242); font-size:40px\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;p style=\"color:blue; font-size:25px\"&gt;The::after pseudo-element adds content following an element's content.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/after-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114292\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/after-pseudo-element.webp\" alt=\"after pseudo element\" width=\"1920\" height=\"863\" \/><\/a><\/p>\n<h3>Before Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody\r\n{\r\ntext-align: center;\r\n}\r\nh1::before{\r\ncontent: \"\\01F525\";\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1 style=\"color:rgb(255,0,242); font-size:60px\"&gt;DataFlair&lt;\/h1&gt;\r\n&lt;p style=\"color:blue; font-size:45px\"&gt;The::after pseudo-element adds content following an element's content.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/before-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114293\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/before-pseudo-element.webp\" alt=\"before pseudo element\" width=\"1920\" height=\"855\" \/><\/a><\/p>\n<h3>Marker Pseudo Element<strong>:<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;marker Demo&lt;\/title&gt;\r\n&lt;style&gt;\r\nbody{\r\nbackground-color: whitesmoke;\r\ntext-align: center;\r\n}\r\nh2\r\n{\r\nfont-size: 35px;\r\ncolor: blue;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\nfont-size: 50px;\r\n}\r\nul{\r\nwidth: 40px;\r\nfont-size:30px;\r\n}\r\nul li::marker{\r\ncolor: brown;\r\nfont-size: 40px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;::marker element&lt;\/h2&gt;\r\n&lt;ul style=\"text-align:center\"&gt;\r\n&lt;li&gt;ReactJs&lt;\/li&gt;\r\n&lt;li&gt;Python&lt;\/li&gt;\r\n&lt;li&gt;Java&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/marker-pseudo-element.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114294\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/marker-pseudo-element.webp\" alt=\"marker pseudo element\" width=\"1920\" height=\"850\" \/><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>In this article, we get an overview of what pseudo elements are and the different ways to implement them. When using a pseudo-element, you can target or add an additional component without having to input further HTML.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn about CSS Pseudo Elements. Let&#8217;s start with what is CSS Pseudo Elements. What are CSS Pseudo Elements? When a keyword is applied to a selector, you can style&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":114287,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27512],"class_list":["post-114265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-pseudo-elements"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Pseudo Elements - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn what are CSS Pseudo elements with examples. See its types like Selection Pseudo Element, First-line Pseudo Element etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Pseudo Elements - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn what are CSS Pseudo elements with examples. See its types like Selection Pseudo Element, First-line Pseudo Element etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-08T05:59:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T15:33:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Pseudo Elements - DataFlair","description":"Learn what are CSS Pseudo elements with examples. See its types like Selection Pseudo Element, First-line Pseudo Element etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/","og_locale":"en_US","og_type":"article","og_title":"CSS Pseudo Elements - DataFlair","og_description":"Learn what are CSS Pseudo elements with examples. See its types like Selection Pseudo Element, First-line Pseudo Element etc.","og_url":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-07-08T05:59:13+00:00","article_modified_time":"2024-07-26T15:33:20+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"CSS Pseudo Elements","datePublished":"2023-07-08T05:59:13+00:00","dateModified":"2024-07-26T15:33:20+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/"},"wordCount":568,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp","keywords":["CSS Pseudo elements"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/","url":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/","name":"CSS Pseudo Elements - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp","datePublished":"2023-07-08T05:59:13+00:00","dateModified":"2024-07-26T15:33:20+00:00","description":"Learn what are CSS Pseudo elements with examples. See its types like Selection Pseudo Element, First-line Pseudo Element etc.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-pseudo-elements.webp","width":1200,"height":628,"caption":"css pseudo elements"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS Pseudo Elements"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/114265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=114265"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/114265\/revisions"}],"predecessor-version":[{"id":142965,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/114265\/revisions\/142965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/114287"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=114265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=114265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=114265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}