{"id":835,"date":"2024-08-15T10:00:48","date_gmt":"2024-08-15T10:00:48","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=835"},"modified":"2024-10-28T16:13:44","modified_gmt":"2024-10-28T16:13:44","slug":"comprehensive-guide-to-css-pseudo-classes-and-their-usage","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2024\/08\/15\/comprehensive-guide-to-css-pseudo-classes-and-their-usage\/","title":{"rendered":"Comprehensive Guide to CSS Pseudo-Classes and Their Usage"},"content":{"rendered":"<p>Whether you\u2019re new to CSS or have years of experience, you\u2019ve likely encountered <strong>pseudo-classes<\/strong>. The most commonly recognized pseudo-class is probably <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:hover\" rel=\"nofollow noopener\" target=\"_blank\">:hover<\/a><\/code>, which allows us to style an element when it\u2019s <strong>in the hover state<\/strong>, such as when a mouse pointer hovers over it.<\/p>\n<p>Building on concepts from our previous discussions on <a href=\"https:\/\/www.hongkiat.com\/blog\/css-margin-auto\/\">margin:auto<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/css-floats\/\">CSS Floats<\/a>, this post provides a detailed examination of pseudo-classes. We\u2019ll explore <strong>what pseudo-classes are<\/strong>, how they function, how they can be categorized, and <strong>how they differ from pseudo-elements<\/strong>.<\/p>\n<h4>Understanding Pseudo-Classes<\/h4>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\" rel=\"nofollow noopener\" target=\"_blank\">pseudo-class<\/a> is a keyword added to CSS selectors to <strong>define a specific state<\/strong> of an HTML element. You can add a pseudo-class to a CSS selector using the <strong>colon syntax<\/strong> <code>:<\/code>, like this: <code>a:hover { ... }<\/code>.<\/p>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/class\" rel=\"nofollow noopener\" target=\"_blank\">CSS class<\/a> is an attribute applied to HTML elements to enforce the same style rules, such as for top menu items or sidebar widget titles. Essentially, CSS classes <strong>group or classify HTML elements<\/strong> that share common traits.<\/p>\n<p>Pseudo-classes are similar to CSS classes because they also <strong>apply style rules to elements with shared characteristics<\/strong>. However, while standard classes are <strong>user-defined<\/strong> and <strong>visible in the source code<\/strong> (e.g., <code>&lt;div class=\"myClass\"&gt;<\/code>), pseudo-classes are <strong>applied by user agents (e.g., web browsers)<\/strong> based on the current state of the HTML element.<\/p>\n<p class=\"recommended_top\">Pseudo-classes and pseudo-elements can be used in CSS selectors but do not exist in the HTML source code. Instead, they are \u201cinserted\u201d by the user agent under certain conditions for use in style sheets. \u2013 <a href=\"https:\/\/www.w3.org\/TR\/REC-CSS1-961217#pseudo-classes-and-pseudo-elements\" rel=\"nofollow noopener\" target=\"_blank\">W3C<\/a><\/p>\n<h4>The Role of Pseudo-Classes<\/h4>\n<p>The <strong>purpose of regular CSS classes<\/strong> is to <strong>classify or group elements<\/strong>. Developers group elements based on intended styling, creating classes like \u201cmenu-items,\u201d \u201cbuttons,\u201d or \u201cthumbnails\u201d to ensure consistent design across similar elements. These groupings are based on <strong>characteristics defined by the developers<\/strong>.<\/p>\n<p>For example, a developer might use a <code>&lt;div&gt;<\/code> as a thumbnail and classify it with a \u201cthumbnail\u201d class.<\/p>\n<pre class=\"html\">\r\n &lt;div class=\"thumbnail\"&gt;[...]&lt;\/div&gt;\r\n<\/pre>\n<p>However, HTML elements possess <strong>inherent characteristics<\/strong> based on their state, position, nature, and interaction with the page and user. These traits are <strong>not typically marked in HTML code<\/strong>, but can be <strong>targeted with pseudo-classes<\/strong> in CSS. Examples include:<\/p>\n<ul>\n<li>An element that is the <em>last<\/em> child within its parent element<\/li>\n<li>A link that has been <em>visited<\/em><\/li>\n<li>An element that has gone <em>fullscreen<\/em><\/li>\n<\/ul>\n<p>These are the types of characteristics typically addressed by pseudo-classes. To better understand the difference between classes and pseudo-classes, let\u2019s consider using the class <code>.last<\/code> to identify the last elements in various parent containers.<\/p>\n<pre class=\"html\">\r\n &lt;ul&gt;\r\n &lt;li&gt;item 1&lt;\/li&gt;\r\n &lt;li&gt;item 2&lt;\/li&gt;\r\n &lt;li&gt;item 3&lt;\/li&gt;\r\n &lt;li class=\"last\"&gt;item 4&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n \r\n &lt;select&gt;\r\n &lt;option&gt;option 1&lt;\/option&gt;\r\n &lt;option&gt;option 2&lt;\/option&gt;\r\n &lt;option&gt;option 3&lt;\/option&gt;\r\n &lt;option class=\"last\"&gt;option 4&lt;\/option&gt;\r\n &lt;\/select&gt;\r\n<\/pre>\n<p>You can style these last-child elements with the following CSS:<\/p>\n<pre class=\"css\">\r\n li.last {\r\n   text-transform: uppercase;\r\n }\r\n \r\n option.last {\r\n   font-style: italic;\r\n }\r\n<\/pre>\n<p>But what happens when the last element changes? You\u2019ll need to manually update the <code>.last<\/code> class from the previous last element to the new one.<\/p>\n<p>This hassle of <strong>updating classes can be avoided<\/strong> for certain common characteristics. For example, using a predefined <code>:last-child<\/code> pseudo-class is highly beneficial. With this, there\u2019s <strong>no need to mark the last element<\/strong> in the HTML code, and you can still style it with the following CSS:<\/p>\n<pre class=\"css\">\r\n li:last-child {\r\n   text-transform: uppercase;\r\n }\r\n \r\n option:last-child {\r\n   font-style: italic;\r\n }\r\n<\/pre>\n<h4>Main Types of Pseudo-Classes<\/h4>\n<p>CSS offers a variety of pseudo-classes that allow developers to target elements based on specific characteristics that might otherwise be difficult to access. You can find a comprehensive <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/pseudo-classes\" rel=\"nofollow noopener\" target=\"_blank\">list of standard pseudo-classes<\/a> on MDN.<\/p>\n<h5>1. Dynamic Pseudo-Classes<\/h5>\n<p>Dynamic pseudo-classes are applied to HTML elements <strong>dynamically<\/strong>, based on the state they transition into due to <strong>user interactions<\/strong>. Some examples include <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:hover\" rel=\"nofollow noopener\" target=\"_blank\">:hover<\/a><\/code>, <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:focus\" rel=\"nofollow noopener\" target=\"_blank\">:focus<\/a><\/code>, <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:link\" rel=\"nofollow noopener\" target=\"_blank\">:link<\/a><\/code>, and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:visited\" rel=\"nofollow noopener\" target=\"_blank\">:visited<\/a><\/code>, all of which are commonly used with the <code>&lt;a&gt;<\/code> anchor tag.<\/p>\n<pre class=\"css\">\r\n a:visited {\r\n   color: #8D20AE;\r\n }\r\n \r\n .button:hover,\r\n .button:focus {\r\n   font-weight: bold;\r\n }\r\n<\/pre>\n<h5>2. State-Based Pseudo-Classes<\/h5>\n<p>State-based pseudo-classes are applied to elements when they are in a <strong>specific static state<\/strong>. Common examples include:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:checked\" rel=\"nofollow noopener\" target=\"_blank\">:checked<\/a><\/code> for checkboxes (<code>&lt;input type=\"checkbox\"&gt;<\/code>)<\/li>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/%3Afullscreen\" rel=\"nofollow noopener\" target=\"_blank\">:fullscreen<\/a><\/code> to target any element currently displayed in full-screen mode<\/li>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:disabled\" rel=\"nofollow noopener\" target=\"_blank\">:disabled<\/a><\/code> for elements that can be disabled, such as <code>&lt;input&gt;<\/code>, <code>&lt;select&gt;<\/code>, and <code>&lt;button&gt;<\/code>.<\/li>\n<\/ul>\n<p>The <code>:checked<\/code> pseudo-class is particularly popular, as it indicates whether a checkbox is selected.<\/p>\n<pre class=\"css\">\r\n .checkbox:checked + label {\r\n   font-style: italic;\r\n }\r\n \r\n input:disabled {\r\n   background-color: #EEEEEE;\r\n }\r\n<\/pre>\n<h5>3. Structural Pseudo-Classes<\/h5>\n<p>Structural pseudo-classes target elements based on their <strong>position within the document structure<\/strong>. Some of the most commonly used examples include <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/%3Afirst-child\" rel=\"nofollow noopener\" target=\"_blank\">:first-child<\/a><\/code>, <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:last-child\" rel=\"nofollow noopener\" target=\"_blank\">:last-child<\/a><\/code>, and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-child(n)\" rel=\"nofollow noopener\" target=\"_blank\">:nth-child(n)<\/a><\/code>. These can be used to style specific child elements based on their position within a container. Another example is <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\" rel=\"nofollow noopener\" target=\"_blank\">:root<\/a><\/code>, which targets the highest-level parent element in the DOM.<\/p>\n<h5>4. Miscellaneous Pseudo-Classes<\/h5>\n<p>There are also pseudo-classes that don\u2019t fit neatly into other categories, such as:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:not\" rel=\"nofollow noopener\" target=\"_blank\">:not(<i>x<\/i>)<\/a><\/code>, which selects elements that don\u2019t match the specified selector <i>x<\/i><\/li>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:lang\" rel=\"nofollow noopener\" target=\"_blank\">:lang(<i>language-code<\/i>)<\/a><\/code> for targeting elements based on the language of their content<\/li>\n<li><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:dir\" rel=\"nofollow noopener\" target=\"_blank\">:dir(<i>directionality<\/i>)<\/a><\/code>, which selects elements with content in a specific directionality (e.g., left-to-right or right-to-left).<\/li>\n<\/ul>\n<pre class=\"css\">\r\n p:lang(ko) {\r\n   background-color: #FFFF00;\r\n }\r\n \r\n :root {\r\n   background-color: #FAEBD7;\r\n }\r\n<\/pre>\n<h4><em>nth-child<\/em> vs <em>nth-of-type<\/em> Pseudo-Classes<\/h4>\n<p>One of the most challenging aspects of pseudo-classes is understanding the difference between the <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-child\" rel=\"nofollow noopener\" target=\"_blank\">:nth-child<\/a><\/code> and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-of-type\" rel=\"nofollow noopener\" target=\"_blank\">:nth-of-type<\/a><\/code> pseudo-classes.<\/p>\n<p>Both of these are structural pseudo-classes that target <strong>specific elements within a parent element<\/strong> (container), but they do so in distinct ways.<\/p>\n<p>Assume <em>n<\/em> is 2. The <code>:nth-child(n)<\/code> selector targets an element that is the <strong>second child of its parent element<\/strong>, regardless of the type of element. On the other hand, <code>:nth-of-type(n)<\/code> targets <strong>the second occurrence of a specific type of element<\/strong> (e.g., a paragraph) within the parent element.<\/p>\n<p>Let\u2019s take a look at an example to illustrate this difference:<\/p>\n<pre class=\"css\">\r\n \/* Styles the second child element inside its parent, which can be of any type *\/\r\n p:nth-child(2) {\r\n   color: #1E90FF; \/* Light blue *\/\r\n }\r\n \r\n \/* Styles the second paragraph inside its parent element *\/\r\n p:nth-of-type(2) {\r\n   font-weight: bold;\r\n }\r\n<\/pre>\n<p>Now, let\u2019s see how this CSS affects the HTML in two different scenarios.<\/p>\n<h5>Case 1<\/h5>\n<p>In Case 1, the second element inside a <code>&lt;div&gt;<\/code> is an unordered list, so the <code>:nth-child(2)<\/code> rule does not apply to the paragraphs. Although the unordered list is the second child, it is <em>not<\/em> a paragraph.<\/p>\n<p>If, however, the parent element contains a second paragraph, the <code>:nth-of-type(2)<\/code> rule will apply, since this rule specifically targets <code>&lt;p&gt;<\/code> elements and ignores other types of elements (like unordered lists) within the parent element.<\/p>\n<p>In our example, the <code>:nth-of-type(2)<\/code> rule will style the second paragraph, which is Child 3 in this case.<\/p>\n<pre class=\"html\">\r\n &lt;!-- Case 1 --&gt;\r\n &lt;div&gt;\r\n   &lt;p&gt;Paragraph 1, Child 1&lt;\/p&gt;\r\n   &lt;ul&gt;Unordered List 1, Child 2&lt;\/ul&gt;\r\n   &lt;p&gt;Paragraph 2, Child 3&lt;\/p&gt;\r\n &lt;\/div&gt;\r\n<\/pre>\n<figure class=\"border-solid-1\"><img loading=\"lazy\" src=\"http:\/\/www.diveintoaccessibility.com\/wp-content\/uploads\/2024\/08\/example-nth-pseudoclass-1.jpg\" alt=\"Example of Nth-Pseudoclass Case 1\" width=\"700\" height=\"234\" \/><\/figure>\n<h5>Case 2<\/h5>\n<p>In Case 2, we move the unordered list to the third position, placing the second paragraph before it. Now, both the <code>:nth-child(2)<\/code> and <code>:nth-of-type(2)<\/code> rules will apply, as the second paragraph is both the second child of its parent <code>&lt;div&gt;<\/code> and the second <code>&lt;p&gt;<\/code> element.<\/p>\n<pre class=\"html\">\r\n &lt;!-- Case 2 --&gt;\r\n &lt;div&gt;\r\n   &lt;p&gt;Paragraph 1, Child 1&lt;\/p&gt;\r\n   &lt;p&gt;Paragraph 2, Child 2&lt;\/p&gt;\r\n   &lt;ul&gt;Unordered List 1, Child 3&lt;\/ul&gt;\r\n &lt;\/div&gt;\r\n<\/pre>\n<figure class=\"border-solid-1\"><img loading=\"lazy\" src=\"http:\/\/www.diveintoaccessibility.com\/wp-content\/uploads\/2024\/08\/example-nth-pseudoclass-2.jpg\" alt=\"Example of Nth-Pseudoclass Case 2\" width=\"700\" height=\"209\" \/><\/figure>\n<p>To explore the differences between <code>:nth-child<\/code> and <code>:nth-of-type<\/code> further, CSS Tricks has a <a href=\"https:\/\/css-tricks.com\/the-difference-between-nth-child-and-nth-of-type\/\" rel=\"nofollow noopener\" target=\"_blank\">great post<\/a> on the topic. If you use SASS, <a href=\"https:\/\/lukyvj.github.io\/family.scss\/\" rel=\"nofollow noopener\" target=\"_blank\">Family.scss<\/a> can help you create complex <em>nth-child<\/em> based elements.<\/p>\n<h4>Pseudo-Classes vs Pseudo-Elements<\/h4>\n<p>When discussing pseudo-classes, it\u2019s crucial to understand <strong>how they differ from pseudo-elements<\/strong> to avoid confusion.<\/p>\n<p><code><a href=\"https:\/\/www.w3.org\/TR\/selectors\/#pseudo-elements\" rel=\"nofollow noopener\" target=\"_blank\">Pseudo-elements<\/a><\/code>, like <code>::before<\/code> and <code>::after<\/code> (<a href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" rel=\"nofollow noopener\" target=\"_blank\">see this tutorial on how to use them<\/a>), are also <strong>added by user agents<\/strong> and can be <strong>targeted and styled with CSS<\/strong> in a manner similar to pseudo-classes.<\/p>\n<p>The key difference is that pseudo-classes are used to select HTML elements that <strong>already exist in the document tree<\/strong>, though they may not be explicitly marked, while <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\/Pseudo-elements\" rel=\"nofollow noopener\" target=\"_blank\">pseudo-elements<\/a> allow us to style elements that <strong>don\u2019t typically exist<\/strong> in the DOM on their own. Examples include <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::before\" rel=\"nofollow noopener\" target=\"_blank\">::before<\/a><\/code> and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::after\" rel=\"nofollow noopener\" target=\"_blank\">::after<\/a><\/code>, or parts of existing elements like <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::first-letter\" rel=\"nofollow noopener\" target=\"_blank\">::first-letter<\/a><\/code> and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::placeholder\" rel=\"nofollow noopener\" target=\"_blank\">::placeholder<\/a><\/code>.<\/p>\n<p>There is also a <strong>difference in syntax<\/strong>: pseudo-elements are generally written with double colons <code>::<\/code>, while pseudo-classes use a single colon <code>:<\/code>. This can be confusing because, in CSS2, pseudo-elements were also marked with a single colon\u2014browsers still support this older syntax.<\/p>\n<p>Additionally, there are differences in <strong>how we can target pseudo-classes and pseudo-elements with CSS<\/strong>.<\/p>\n<h5>1. Their Place in the CSS Selector Sequence<\/h5>\n<p>Pseudo-elements must appear <em>after<\/em> the sequence of selectors, while pseudo-classes can be positioned anywhere within the CSS selector sequence.<\/p>\n<p>For instance, you can target the last list item in a <code>&lt;ul&gt;<\/code> element in two different ways:<\/p>\n<pre class=\"html\">\r\n&lt;ul&gt;\r\n  &lt;li class=\"red\"&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;\/li&gt;\r\n  &lt;li class=\"red\"&gt;&lt;\/li&gt;\r\n  &lt;li class=\"red\"&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt; \r\n<\/pre>\n<pre class=\"css\">\r\nul &gt; :last-child.red {\r\n  color: #B0171F;\r\n}\r\n<\/pre>\n<p>OR<\/p>\n<pre class=\"css\">\r\nul &gt; .red:last-child {\r\n  color: #B0171F;\r\n}\r\n<\/pre>\n<p>The first selector targets the last child inside the <code>&lt;ul&gt;<\/code> element that has the class <code>.red<\/code>, while the second selector targets the last child among the elements that possess the <code>.red<\/code> class inside <code>&lt;ul&gt;<\/code>. As you can see, <strong>the position of the pseudo-class can vary<\/strong>.<\/p>\n<p>Let\u2019s attempt something similar with pseudo-elements.<\/p>\n<pre class=\"css\">\r\nul &gt; .red::after {\r\n  display: block;\r\n  content: 'red';\r\n  color: #B0171F;\r\n}\r\n<\/pre>\n<p>The CSS above is valid, and the text \u201cred\u201d will appear <em>after<\/em> the <code>&lt;li&gt;<\/code> items with the class <code>.red<\/code>.<\/p>\n<p>However, the following code will not work because <strong>we cannot change the position of a pseudo-element<\/strong> within the selector sequence.<\/p>\n<pre class=\"css\">\r\nul &gt; ::after.red {\r\n  display: block;\r\n  content: 'red';\r\n  color: #B0171F;\r\n}\r\n<\/pre>\n<h5>2. Number of Occurrences in a Selector Sequence<\/h5>\n<p>Only one pseudo-element can be used per selector, whereas pseudo-classes <strong>can be combined<\/strong> as long as the combination makes sense. For example, to target first-child elements that are also read-only, you can combine the pseudo-classes <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:first-child\" rel=\"nofollow noopener\" target=\"_blank\">:first-child<\/a><\/code> and <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:read-only\" rel=\"nofollow noopener\" target=\"_blank\">:read-only<\/a><\/code> as follows:<\/p>\n<pre class=\"css\">\r\n:first-child:read-only {\r\n  color: #EEEEEE;\r\n}\r\n<\/pre>\n<h4>jQuery Selector Extensions<\/h4>\n<p>Not all selector syntax that includes a <code>:<\/code> is a proper CSS pseudo-class. If you\u2019ve used jQuery, you might be familiar with selectors like <code>$(':checkbox')<\/code>, <code>$(':input')<\/code>, and <code>$(':selected')<\/code>.<\/p>\n<p>It\u2019s important to note that <strong>these are <em>not<\/em> CSS pseudo-classes<\/strong> being targeted by jQuery. Instead, they are known as <a href=\"https:\/\/api.jquery.com\/category\/selectors\/jquery-selector-extensions\/\" rel=\"nofollow noopener\" target=\"_blank\">jQuery selector extensions<\/a>.<\/p>\n<p>jQuery selector extensions allow you to <strong>target HTML elements with simpler keywords<\/strong>. Many of these extensions are shorthand for combinations of standard CSS selectors, represented by a single keyword.<\/p>\n<pre class=\"javascript\">\r\n\/* Change the font of all input-related HTML elements,\r\n   like button, select, and input *\/\r\n \r\n$( \":input\" ).css(\"font-family\",\"courier new\");\r\n<\/pre>\n<p>The post <a href=\"https:\/\/www.hongkiat.com\/blog\/definite-guide-css-pseudoclasses\/\">Comprehensive Guide to CSS Pseudo-Classes and Their Usage<\/a> appeared first on <a href=\"https:\/\/www.hongkiat.com\/blog\">Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether you\u2019re new to CSS or have years of experience, you\u2019ve likely encountered pseudo-classes. The most commonly recognized pseudo-class is probably :hover, which allows us [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/835"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=835"}],"version-history":[{"count":3,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/835\/revisions"}],"predecessor-version":[{"id":840,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/835\/revisions\/840"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media\/837"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=835"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}