{"id":14135,"date":"2012-07-02T23:01:02","date_gmt":"2012-07-02T15:01:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14135"},"modified":"2025-04-04T01:10:22","modified_gmt":"2025-04-03T17:10:22","slug":"css3-attribute-selector","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/","title":{"rendered":"CSS3 Attribute Selector: Targeting the File Type"},"content":{"rendered":"

Attribute selectors<\/strong> are incredibly handy for choosing elements without needing extra id<\/code>s or classes<\/code>. If the element you\u2019re targeting has attributes like href<\/code>, src<\/code>, or type<\/code>, there\u2019s no need to add anything else.<\/p>\n

These attribute selectors<\/a> have been a part of CSS since version 2.1. With the introduction of CSS3, more types of attribute selectors have been added, allowing us to specify targets based on the element\u2019s attributes even more accurately.<\/p>\n

In this article, we\u2019ll explore how to use a particular syntax to select elements based on the file type<\/strong> specified in an attribute\u2019s value.<\/p>\n

Syntax and Browser Compatibility<\/h2>\n

To target a specific file type<\/strong>, which is usually found at the end of a file name, we use the syntax [attr$=\"value\"]<\/code>. This employs the $=<\/code> operator to focus on the end of the attribute\u2019s value. For instance:<\/p>\n

\r\na[href$=\".pdf\"]::before {\r\n  background: url('..\/images\/document-pdf-text.png') no-repeat;\r\n}\r\n<\/pre>\n
This code snippet targets links ending in .pdf<\/code> and adds a PDF icon in the :before<\/code> pseudo-element.<\/p>\n
\"PDF<\/figure>\n
\n
<\/i><\/div>\n
PDF Icon Source<\/strong>: Fugue Icons<\/a><\/div>\n
<\/div>\n<\/div>\n
While this approach is a widely used application<\/a> of the selector, the possibilities extend far beyond this example<\/a>.<\/p>\n
As for browser support, though this syntax was formally introduced with CSS3, it\u2019s been compatible with browsers as early as Internet Explorer 7<\/strong>, allowing its use across all modern web designs.<\/p>\n
An Example:<\/h2>\n
You\u2019ll never know unless you try<\/strong>. Experimenting with new techniques is key to understanding concepts that might seem complex at first glance. Here, we\u2019ll show how this specific syntax can simplify targeting elements within HTML structures, which might have been challenging to achieve with plain CSS alone.<\/p>\n
We will use an HTML5 structure<\/a><\/strong> as an example, featuring a list of three images along with their captions. This example is meant to demonstrate the syntax\u2019s application and doesn\u2019t imply that your HTML should match exactly; whether you have fewer or more images, the essence is to grasp how to utilize this syntax effectively within any HTML structure.<\/p>\n
<ul>\r\n<ul>\r\n  <li>\r\n    <figure>\r\n      <img src=\"images\/macpro.jpg\">\r\n      <figcaption>jpg<\/figcaption>\r\n    <\/figure>\r\n  <\/li>\r\n  <li>\r\n    <figure>\r\n      <img src=\"images\/macpro.png\">\r\n      <figcaption>png<\/figcaption>\r\n    <\/figure>\r\n  <\/li>\r\n  <li>\r\n    <figure>\r\n      <img src=\"images\/macpro.gif\">\r\n      <figcaption>gif<\/figcaption>\r\n    <\/figure>\r\n  <\/li>\r\n<\/ul>\r\n<\/pre>\n
Each image listed comes in one of three formats or extensions: jpg<\/strong>, png<\/strong>, and gif<\/strong>. Additionally, each image has a caption reflecting its extension, which serves as the image\u2019s label.<\/p>\n
Our goal is to assign different background colors to the captions based on the image extension: green<\/strong> for jpg, blue<\/strong> for png, and purple<\/strong> for gif.<\/p>\n
Let\u2019s begin by setting the figure tag\u2019s position to relative, as we\u2019ll be using absolute<\/code> positioning for the captions.<\/p>\n
\r\nfigure {\r\n  position: relative;\r\n}\r\n<\/pre>\n
Next, we\u2019ll add some styling to the images, including borders and shadows, for a bit of visual flair.<\/p>\n
\r\nimg {\r\n  border: 5px solid #ccc;\r\n  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5);\r\n  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); \r\n}\r\n<\/pre>\n
Finally, we\u2019ll define the default style and positioning for the captions. Each caption or label will be a 50px square, positioned at the top right of the image.<\/p>\n
\r\nimg + figcaption {\r\n  color: #fff;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 50px;\r\n  height: 50px;\r\n  line-height: 50px;\r\n  text-align: center;\r\n}\r\n<\/pre>\n
Now, let\u2019s introduce the background color. We achieve this by combining the attribute selector with the adjacent sibling selector, +<\/strong>.<\/p>\n
\r\nimg[src$=\".jpg\"] + figcaption {\r\n  background-color: #a8b700;\r\n}\r\n<\/pre>\n
This code targets every image whose source attribute ends with .jpg<\/code>. The adjacent sibling selector then identifies the next element, in this case, applying a background color of #a8b700<\/code> to the figcaption<\/code>.<\/p>\n
Below are the codes to apply background colors to captions based on the remaining image formats, .png and .gif.<\/p>\n
\r\nimg[src$=\".png\"] + figcaption {\r\n  background-color: #389abe;\r\n}\r\n\r\nimg[src$=\".gif\"] + figcaption {\r\n  background-color: #8960a7;\r\n}\r\n<\/pre>\n
\"CSS<\/figure>\n
\n
<\/i><\/div>\n
Image sources: MacPro 1<\/a>, MacPro 2<\/a>, and MacPro 3<\/div>\n
<\/div>\n<\/div>\n
Wrapping Up<\/h2>\n
We hope this demonstration has shown you the possibilities when styling with specialized selectors, like the attribute selector we\u2019ve explored. Next time you\u2019re crafting your HTML, consider investigating if your design goals can be met with such selectors before resorting to adding unnecessary classes<\/code> or id<\/code>s to your well-structured markup.<\/p>\n
Interestingly, there are two additional selectors of this nature that we plan to discuss in future posts. So, keep an eye out for those!<\/p>","protected":false},"excerpt":{"rendered":"
Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you\u2019re targeting has attributes like href, src, or type, there\u2019s no need to add anything else. These attribute selectors have been a part of CSS since version 2.1. With the introduction of CSS3, more types of attribute selectors…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392,352],"tags":[507,4683,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCSS3 Attribute Selector: Targeting the File Type - Hongkiat<\/title>\n<meta name=\"description\" content=\"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like\" \/>\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-attribute-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Attribute Selector: Targeting the File Type\" \/>\n<meta property=\"og:description\" content=\"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/\" \/>\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-02T15:01:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:10:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.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-attribute-selector\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"CSS3 Attribute Selector: Targeting the File Type\",\"datePublished\":\"2012-07-02T15:01:02+00:00\",\"dateModified\":\"2025-04-03T17:10:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/\"},\"wordCount\":623,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-source-selector\\\/css3-attr-selector-example.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-attribute-selector\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/\",\"name\":\"CSS3 Attribute Selector: Targeting the File Type - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-source-selector\\\/css3-attr-selector-example.jpg\",\"datePublished\":\"2012-07-02T15:01:02+00:00\",\"dateModified\":\"2025-04-03T17:10:22+00:00\",\"description\":\"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-source-selector\\\/css3-attr-selector-example.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-source-selector\\\/css3-attr-selector-example.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-attribute-selector\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Attribute Selector: Targeting the File Type\"}]},{\"@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 Attribute Selector: Targeting the File Type - Hongkiat","description":"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like","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-attribute-selector\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 Attribute Selector: Targeting the File Type","og_description":"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-02T15:01:02+00:00","article_modified_time":"2025-04-03T17:10:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.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-attribute-selector\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"CSS3 Attribute Selector: Targeting the File Type","datePublished":"2012-07-02T15:01:02+00:00","dateModified":"2025-04-03T17:10:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/"},"wordCount":623,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.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-attribute-selector\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/","name":"CSS3 Attribute Selector: Targeting the File Type - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.jpg","datePublished":"2012-07-02T15:01:02+00:00","dateModified":"2025-04-03T17:10:22+00:00","description":"Attribute selectors are incredibly handy for choosing elements without needing extra ids or classes. If the element you're targeting has attributes like","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-source-selector\/css3-attr-selector-example.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-attribute-selector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Attribute Selector: Targeting the File Type"}]},{"@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-3FZ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14135","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=14135"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14135\/revisions"}],"predecessor-version":[{"id":73530,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14135\/revisions\/73530"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14135"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}