{"id":14037,"date":"2012-06-20T21:01:31","date_gmt":"2012-06-20T13:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14037"},"modified":"2025-04-04T01:09:32","modified_gmt":"2025-04-03T17:09:32","slug":"a-look-into-css3-negation-not-selector","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/","title":{"rendered":"Understanding the CSS3 :not Selector"},"content":{"rendered":"<p>series_html5css3]<\/p>\n<p><code>:hover<\/code>, <code>:focus<\/code>, and <code>:active<\/code> are just a few of the selectors CSS offers to target elements under specific conditions. However, today\u2019s focus is on a lesser-known, yet widely utilized tool among web designers \u2013 the <code><strong>:not<\/strong><\/code> selector, also known as the negation selector.<\/p>\n<p>The <code><strong>:not<\/strong><\/code> selector, as the name suggests, targets <em>the inverse of the specified element or condition<\/em>.<\/p>\n<p>For instance, to target any element except <code>p<\/code> (paragraph), use the following syntax:<\/p>\n<pre>\r\n :not(p)\r\n <\/pre>\n<p>Alternatively, to select a <code>div<\/code> element that does <strong>not<\/strong> carry the class <code>abc<\/code>, use this syntax:<\/p>\n<pre>\r\n div:not(.abc)\r\n <\/pre>\n<p>Let\u2019s apply the :not selector in a practical example:<\/p>\n<p>We\u2019ll start with a few paragraphs containing links from Wikipedia and some fictional domains. Below is the HTML markup for our example.<\/p>\n<pre>\r\n    &lt;article&gt;\r\n        &lt;h1&gt;The CSS :not Selector Demo&lt;\/h1&gt;\r\n        &lt;p&gt;Jujubes applicake sesame snaps chupa chups &lt;a href=\"http:\/\/www.thisisnotwikipedia.com\/\"&gt;chocolate cake&lt;\/a&gt;. Oat cake marshmallow wypas toffee donut cake. Chupa chups jelly cupcake gummi bears. Lemon drops cake wafer.&lt;\/p&gt;\r\n        &lt;p&gt;&lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Cheesecake\"&gt;Cheesecake chocolate cake donut&lt;\/a&gt; jelly sweet roll powder souffl\u00e9 chocolate cake. Wypas cotton candy lemon drops cookie candy donut bonbon marzipan. Macaroon candy liquorice jelly-o. Chocolate pie sweet roll candy &lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Marshmallow\"&gt;marshmallow&lt;\/a&gt; drag\u00e9e cotton candy brownie marshmallow.&lt;\/p&gt;\r\n        &lt;p&gt;Pudding topping marshmallow bear claw. Pie muffin pastry gummies &lt;a href=\"http:\/\/www.exampledomain.com\"&gt;fruitcake brownie&lt;\/a&gt; jelly gingerbread sesame snaps. Candy pudding cupcake bear claw. Carrot cake muffin cotton candy tootsie roll muffin. Jelly beans tart drag\u00e9e sweet icing &lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Chocolate_bar\"&gt;wafer topping chocolate bar&lt;\/a&gt;. Sweet roll toffee sugar plum pastry drage &lt;a href=\"http:\/\/www.somename.co\/\"&gt;bonbon candy muffin&lt;\/a&gt;.&lt;\/p&gt;\r\n        &lt;p&gt;&lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Pastry\"&gt;Cake marzipan applicake pastry&lt;\/a&gt; wypas fruitcake. Oat cake chocolate wypas drag\u00e9e sugar plum carrot cake icing. Caramels chocolate bar croissant wafer cupcake pie jujubes chocolate bar. Biscuit candy canes drag\u00e9e.Candy brownie oat cake sesame snaps cheesecake powder tootsie roll biscuit bear claw. Souffl\u00e9 gummi bears jelly beans sesame snaps faworki &lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Dessert\"&gt;cookie dessert sweet bonbon&lt;\/a&gt;.&lt;\/p&gt;\r\n    &lt;\/article&gt;\r\n<\/pre>\n<p>The goal is to highlight links that don\u2019t lead to Wikipedia by marking them with an exclamation mark. This draws attention to these particular links.<\/p>\n<p>First, we\u2019ll use the <code>:after<\/code> pseudo-element on all links to add the mark, setting it as an <code>inline-block<\/code> element.<\/p>\n<pre>\r\n a:after {\r\n display: inline-block; \r\n }<\/pre>\n<p>Next, to specifically target links not directed to Wikipedia, we\u2019ll use the <code>:not<\/code> selector together with an attribute selector. This combination will select anchor tags where the href attribute does not start with <code>http:\/\/en.wikipedia.org\/<\/code>. Here\u2019s how it\u2019s done:<\/p>\n<pre>\r\n    a:not([href^=\"http:\/\/en.wikipedia.org\/\"]):after {\r\n        background-color: #F8EEBD;\r\n        border: 1px solid #EEC56D;\r\n        border-radius: 3px 3px 3px 3px;\r\n        color: #B0811E;\r\n        content: \"!\";\r\n        font-size: 10pt;\r\n        margin-left: 5px;\r\n        padding: 1px 6px;\r\n        position: relative;\r\n    }\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.jpg\" alt=\"CSS :not Selector Example\" width=\"500\" height=\"542\"><\/figure>\n<p>This method successfully adds an exclamation mark to non-Wikipedia links.<\/p>\n<h3>Noting a Chrome Quirk<\/h3>\n<p>In Chrome, you might see every link marked with an exclamation, contrary to what\u2019s expected. This discrepancy has been <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/group\/chromium-bugs\/browse_thread\/thread\/edf3f24fe03b4532?pli=1\">recognized as a bug<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-chrome.jpg\" alt=\"Chrome Bug Example\" width=\"500\" height=\"542\"><\/figure>\n<p>To address this issue, include the following rule:<\/p>\n<pre>\r\n    a[href^=\"http:\/\/en.wikipedia.org\/\"] \/*Chrome Hack*\/ {\r\n        display: inline-block;\r\n    }\r\n<\/pre>\n<p>This adjustment resolves the problem.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>The <code>:not<\/code> selector proves incredibly useful in certain scenarios, like the one demonstrated. It allows for the selection of specific elements without the need for additional classes or markup. This selector opens the door to many creative possibilities, such as creating filter effects, as showcased in <a href=\"https:\/\/tympanus.net\/codrops\/2012\/01\/09\/filter-functionality-with-css3\/\">Filter Functionality with CSS3<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today\u2019s focus is on a lesser-known, yet widely utilized tool among web designers \u2013 the :not selector, also known as the negation selector. The :not selector, as the name suggests, targets the inverse of&hellip;<\/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":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Understanding the CSS3 :not Selector - Hongkiat<\/title>\n<meta name=\"description\" content=\"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today&#039;s\" \/>\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\/a-look-into-css3-negation-not-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding the CSS3 :not Selector\" \/>\n<meta property=\"og:description\" content=\"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today&#039;s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-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-06-20T13:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:09:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Understanding the CSS3 :not Selector\",\"datePublished\":\"2012-06-20T13:01:31+00:00\",\"dateModified\":\"2025-04-03T17:09:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/\"},\"wordCount\":297,\"commentCount\":31,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-not-selector\\\/not-preview-1.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\\\/a-look-into-css3-negation-not-selector\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/\",\"name\":\"Understanding the CSS3 :not Selector - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-not-selector\\\/not-preview-1.jpg\",\"datePublished\":\"2012-06-20T13:01:31+00:00\",\"dateModified\":\"2025-04-03T17:09:32+00:00\",\"description\":\"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today's\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-not-selector\\\/not-preview-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-not-selector\\\/not-preview-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/a-look-into-css3-negation-not-selector\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding the CSS3 :not 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":"Understanding the CSS3 :not Selector - Hongkiat","description":"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today's","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\/a-look-into-css3-negation-not-selector\/","og_locale":"en_US","og_type":"article","og_title":"Understanding the CSS3 :not Selector","og_description":"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today's","og_url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-20T13:01:31+00:00","article_modified_time":"2025-04-03T17:09:32+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Understanding the CSS3 :not Selector","datePublished":"2012-06-20T13:01:31+00:00","dateModified":"2025-04-03T17:09:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/"},"wordCount":297,"commentCount":31,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.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\/a-look-into-css3-negation-not-selector\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/","url":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/","name":"Understanding the CSS3 :not Selector - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.jpg","datePublished":"2012-06-20T13:01:31+00:00","dateModified":"2025-04-03T17:09:32+00:00","description":"series_html5css3] :hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today's","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-not-selector\/not-preview-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/a-look-into-css3-negation-not-selector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding the CSS3 :not 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-3Ep","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14037","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=14037"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14037\/revisions"}],"predecessor-version":[{"id":73524,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14037\/revisions\/73524"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14037"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}