{"id":14324,"date":"2012-07-16T21:01:22","date_gmt":"2012-07-16T13:01:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14324"},"modified":"2024-07-25T17:29:11","modified_gmt":"2024-07-25T09:29:11","slug":"css3-first-of-type","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/","title":{"rendered":"A Look Into: CSS3 :first-of-type Structural Selector"},"content":{"rendered":"

One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without needing to use the class<\/code>, id<\/code>, or other attributes. In this discussion, we\u2019ll delve into the :first-of-type<\/strong> selector.<\/p>\n

This particular :first-of-type<\/code> selector focuses on identifying the first child element within a specific parent, offering a simple example: the code below aims at the first h2<\/code> tag present on a webpage.<\/p>\n

\r\nh2:first-of-type {\r\n  \/* style declaration *\/\r\n}\r\n        <\/pre>\n
It\u2019s worth noting that :first-of-type<\/code> essentially performs the same function as :nth-of-type(1)<\/code>. This flexibility allows for targeting not just the first element of its kind but also the second, third, and so on, as demonstrated in the snippet below, which targets the webpage\u2019s second h2<\/code> element.<\/p>\n
\r\nh2:nth-of-type(2) {\r\n    \/* style declaration *\/\r\n}\r\n        <\/pre>\n
:first-of-type<\/code> vs. :first-child<\/code><\/h2>\n
Although it might seem that the :first-of-type<\/code> and :first-child<\/code> selectors do the same job, there\u2019s a distinct difference between them. Let\u2019s explore this with an example:<\/p>\n
Imagine we have a set of five paragraph elements contained within a div<\/code> element, like so:<\/p>\n
\r\n<div>\r\n    <p>Paragraph 1<\/p>\r\n    <p>Paragraph 2<\/p>\r\n    <p>Paragraph 3<\/p>\r\n    <p>Paragraph 4<\/p>\r\n    <p>Paragraph 5<\/p>\r\n<\/div>\r\n        <\/pre>\n
If we aim to style the first paragraph using the :first-child<\/code> selector, our code would look something like this:<\/p>\n
\r\np:first-child {\r\n    padding: 5px 10px;\r\n    border-radius: 2px;\r\n    background: #8960a7;\r\n    color: #fff;\r\n    border: 1px solid #5b456a;\r\n}\r\n        <\/pre>\n
This method will, as expected, select the first paragraph successfully.<\/p>\n
\"First<\/figure>\n
However, introducing a different element, such as an h1<\/code>, before the first paragraph changes the situation entirely:<\/p>\n
\r\n<div>\r\n    <h1>Heading 1<\/h1>\r\n    <p>Paragraph 1<\/p>\r\n    <p>Paragraph 2<\/p>\r\n    <p>Paragraph 3<\/p>\r\n    <p>Paragraph 4<\/p>\r\n    <p>Paragraph 5<\/p>\r\n<\/div>\r\n        <\/pre>\n
In this case, the first paragraph is not selected<\/strong> because the first child of the div<\/code> is now an h1<\/code>, not a paragraph.<\/p>\n
\"First<\/figure>\n
This is where the :first-of-type<\/code> selector shines, effectively solving the problem by selecting the first paragraph regardless of the preceding elements.<\/p>\n
\r\np:first-of-type {\r\n    padding: 5px 10px;\r\n    border-radius: 2px;\r\n    background: #a8b700;\r\n    color: #fff;\r\n    border: 1px solid #597500;\r\n}\r\n        <\/pre>\n
\"First<\/figure>\n
The last<\/code> Selector<\/h2>\n
Just as there is a selector for the first, there is naturally a counterpart for the last. The :last-child<\/code> and :last-of-type<\/code> selectors serve as the reverse of the previously discussed :first-child<\/code> and :first-of-type<\/code> selectors. Their purpose is to target the last child within a given element<\/strong>.<\/p>\n
For instance, the following code snippet is designed to style the last paragraph within a div<\/code> element:<\/p>\n
\r\np:last-child {\r\n    padding: 5px 10px;\r\n    border-radius: 2px;\r\n    background: #8960a7;\r\n    color: #fff;\r\n    border: 1px solid #5b456a;\r\n}\r\n        <\/pre>\n
Similarly, this next snippet will also aim at the last paragraph, even when it is followed immediately by a different type of element<\/strong>, showcasing the versatility and precision of the :last-of-type<\/code> selector in various scenarios.<\/p>\n
\r\np:last-of-type {\r\n    padding: 5px 10px;\r\n    border-radius: 2px;\r\n    background: #a8b700;\r\n    color: #fff;\r\n    border: 1px solid #597500;\r\n}\r\n        <\/pre>\n
Browser Compatibility<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
Browser<\/th>\nDesktop Version<\/th>\nDesktop Support<\/th>\nMobile Version<\/th>\nMobile Support<\/th>\n<\/tr>\n<\/thead>\n
Google Chrome<\/td>\n2 and later<\/td>\nSupported<\/td>\n18 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Mozilla Firefox<\/td>\n3.5 and later<\/td>\nSupported<\/td>\n4.0 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Safari<\/td>\n3.1 and later<\/td>\nSupported<\/td>\n3.2 and later (iOS)<\/td>\nSupported<\/td>\n<\/tr>\n
Microsoft Edge<\/td>\n12 and later<\/td>\nSupported<\/td>\n12 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Opera<\/td>\n9.5 and later<\/td>\nSupported<\/td>\n10 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Internet Explorer<\/td>\n9 and later<\/td>\nSupported<\/td>\n9 and later<\/td>\nSupported<\/td>\n<\/tr>\n
Samsung Internet<\/td>\nN\/A<\/td>\nN\/A<\/td>\n1.0 and later<\/td>\nSupported<\/td>\n<\/tr>\n<\/tbody>\n<\/table>","protected":false},"excerpt":{"rendered":"
One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without needing to use the class, id, or other attributes. In this discussion, we\u2019ll delve into the :first-of-type selector. This particular :first-of-type selector focuses on identifying the first child element within a…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,4683,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCSS3 :First-Of-Type Structural Selector<\/title>\n<meta name=\"description\" content=\"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: CSS3 :first-of-type Structural Selector\" \/>\n<meta property=\"og:description\" content=\"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-16T13:01:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-25T09:29:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: CSS3 :first-of-type Structural Selector\",\"datePublished\":\"2012-07-16T13:01:22+00:00\",\"dateModified\":\"2024-07-25T09:29:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/\"},\"wordCount\":406,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-first-of-type\\\/the-first-child.jpg\",\"keywords\":[\"CSS\",\"CSS Selectors\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/\",\"name\":\"CSS3 :First-Of-Type Structural Selector\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-first-of-type\\\/the-first-child.jpg\",\"datePublished\":\"2012-07-16T13:01:22+00:00\",\"dateModified\":\"2024-07-25T09:29:11+00:00\",\"description\":\"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-first-of-type\\\/the-first-child.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-first-of-type\\\/the-first-child.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-first-of-type\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: CSS3 :first-of-type Structural Selector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS3 :First-Of-Type Structural Selector","description":"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without","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:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: CSS3 :first-of-type Structural Selector","og_description":"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-16T13:01:22+00:00","article_modified_time":"2024-07-25T09:29:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: CSS3 :first-of-type Structural Selector","datePublished":"2012-07-16T13:01:22+00:00","dateModified":"2024-07-25T09:29:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/"},"wordCount":406,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg","keywords":["CSS","CSS Selectors","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/","name":"CSS3 :First-Of-Type Structural Selector","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg","datePublished":"2012-07-16T13:01:22+00:00","dateModified":"2024-07-25T09:29:11+00:00","description":"One of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors enable precise targeting of elements without","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-first-of-type\/the-first-child.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: CSS3 :first-of-type Structural Selector"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3J2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14324"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14324\/revisions"}],"predecessor-version":[{"id":72396,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14324\/revisions\/72396"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14324"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}