{"id":42980,"date":"2018-01-23T23:01:00","date_gmt":"2018-01-23T15:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42980"},"modified":"2018-04-09T17:09:31","modified_gmt":"2018-04-09T09:09:31","slug":"count-html-state-change","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/","title":{"rendered":"Count HTML State Changes Real-Time with CSS"},"content":{"rendered":"

Counting is a ubiquitous task<\/strong> in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many donut flavors are bagged in the shopping cart? All are crucial questions users deserve answers for.<\/p>\n

So, this post will show you how to count bi-stated elements<\/strong>, which constitute the majority of user controls such as checkboxes and text inputs, using CSS counters<\/strong>.<\/p>\n

You need to target those states with CSS first<\/strong>, which is possible by means of pseudo-classes and HTML attributes<\/strong> that allow us to do just that. Go ahead and experiment with the idea and explore the different pseudo-classes that can indicate the change in a state of an element, dynamically.<\/p>\n

We\u2019ll start with the simplest, checkboxes.<\/p>\n

Read Also:<\/strong> The Definitive Guide to CSS Pseudo-Classes<\/a><\/p>\n

1. Checkboxes<\/h2>\n

Checkboxes go into \u201cchecked\u201d state when they\u2019re ticked. The :checked<\/code> pseudo-class indicates the checked state<\/strong>.<\/p>\n

\r\n<input type=checkbox> checkbox #1<br>\r\n<input type=checkbox> checkbox #2<br>\r\n<input type=checkbox> checkbox #3<br>\r\n\r\n<br>Checked: <b id=tickedBoxCount><\/b>\r\n<br>Unchecked: <b id=unTickedBoxCount><\/b>\r\n<\/pre>\n
\r\n::root{\r\n  counter-reset: tickedBoxCount, unTickedBoxCount;\r\n}\r\ninput[type='checkbox']{\r\n  counter-increment: unTickedBoxCount;\r\n}\r\ninput[type='checkbox']:checked{\r\n  counter-increment: tickedBoxCount;\r\n}\r\n#tickedBoxCount::before{\r\n  content: counter(tickedBoxCount);\r\n}\r\n#unTickedBoxCount::before{\r\n  content: counter(unTickedBoxCount);\r\n}\r\n<\/pre>\n
Like I said before, this case is very simple. We set two counters at the root element<\/strong> and increment each for every checkbox for its two states, respectively. The counter values are then displayed in a designated place using content<\/code> property<\/strong>.<\/p>\n
If you want to understand better how CSS counters work<\/strong>, have a look at our previous post<\/a>.<\/p>\n
Below, you can see the final result. When you check and uncheck the checkboxes, the values of the \u201cChecked\u201d and \u201cUnchecked\u201d counters are modified real-time<\/strong>.<\/p>\n
\"Counting<\/figure>\n
2. Text inputs<\/h2>\n
We can also count how many text inputs have been filled<\/strong> and how many have been left empty<\/strong> by the user. This solution won\u2019t be as straightforward as the previous one, because, unlike checkboxes, text inputs don\u2019t have pseudo-classes<\/strong> to flag when they\u2019re filled.<\/p>\n
So, we need to find an alternate route. There\u2019s a pseudo-class that indicates when an element has placeholder text<\/strong>; it\u2019s called :placeholder-shown<\/code><\/a>.<\/p>\n
If we use placeholders in our text input, we can know when the input field is empty. This happens when the user has not yet typed anything into it<\/strong> because the placeholder will disappear when that happens.<\/p>\n
\r\n<input type=text placeholder='placeholder text'><br>\r\n<input type=text placeholder='placeholder text'><br>\r\n<input type=text placeholder='placeholder text'><br>\r\n\r\n<br> Filled: <b id=filledInputCount><\/b>\r\n<br> Empty: <b id=emptyInputCount><\/b>\r\n<\/pre>\n
\r\n::root{\r\n  counter-reset: filledInputCount, emptyInputCount;\r\n}\r\ninput[type='text']{\r\n  counter-increment: filledInputCount;\r\n}\r\ninput[type='text']:placeholder-shown{\r\n  counter-increment: emptyInputCount;\r\n}\r\n#filledInputCount::before{\r\n  content: counter(filledInputCount);\r\n}\r\n#emptyInputCount::before{\r\n  content: counter(emptyInputCount);\r\n}\r\n<\/pre>\n
The result is similar to the previous one\u2014the two counters are automatically incremented and decremented<\/strong> as we add or remove text to or from the input fields.<\/p>\n
\"Counting<\/figure>\n
3. Details<\/h2>\n
Alternate states of an element don\u2019t always have to be indicated only by pseudo-classes. There might be HTML attributes doing that job<\/strong>, like in the case of the <details><\/code><\/a> element.<\/p>\n
The <details><\/code> element displays the contents of its <summary><\/code> child element<\/strong>. When the user clicks that, other contents of the <details><\/code> element become visible<\/strong>. Note that <summary><\/code> element always needs to come first<\/strong> among the children of <details><\/code>.<\/p>\n
So, <details><\/code> has two states<\/strong>: open and closed. The open state is indicated by the presence of the open<\/code> HTML attribute in the element<\/strong>. This attribute can be targeted in CSS using its attribute selector<\/strong>.<\/p>\n
\r\n<details>\r\n  <summary>Q1: question #1<\/summary>\r\n  <p>answer #1<\/p>\r\n<\/details>\r\n<details>\r\n  <summary>Q2: question #2<\/summary>\r\n  <p>answer #2<\/p>\r\n<\/details>\r\n<details>\r\n  <summary>Q3: question #3<\/summary>\r\n  <p>answer #3<\/p>\r\n<\/details>\r\n<br>\r\n<br> Open: <b id=openDetailCount><\/b>\r\n<br> Closed: <b id=closedDetailCount><\/b>\r\n<\/pre>\n
\r\n::root{\r\n  counter-reset: openDetailCount, closedDetailCount;\r\n}\r\ndetails{\r\n  counter-increment: closedDetailCount;\r\n}\r\ndetails[open]{\r\n  counter-increment: openDetailCount;\r\n}\r\n#closedDetailCount::before{\r\n  content: counter(closedDetailCount);\r\n}\r\n#openDetailCount::before{\r\n  content: counter(openDetailCount);\r\n}\r\n<\/pre>\n
The result is two real-time CSS-counters<\/strong> again: Open and Closed.<\/p>\n
\"Counting<\/figure>\n
4. Radio buttons<\/h2>\n
Counting radio buttons require a different technique. We could certainly use the :checked<\/code> pseudo-class we used for checkboxes. However, radio buttons are used differently than checkboxes<\/strong>.<\/p>\n
Radio buttons are meant to be in groups<\/strong>. The user can select only one inside a group. Each group acts as a single unit. The two states a radio button group can have is either one of the buttons is selected<\/strong> or none of them are selected<\/strong>.<\/p>\n
Thus, we shouldn\u2019t count radio buttons by individual buttons, but by button groups<\/strong>. To achieve that, we make use of the :nth-of-type<\/code> selector<\/strong>. I\u2019ll explain it later; let\u2019s see the code first.<\/p>\n
\r\n<input type=radio name='radio-1'>radio-1.1\r\n<input type=radio name='radio-1'>radio-1.2\r\n<input type=radio name='radio-1'>radio-1.3\r\n<br>\r\n<input type=radio name='radio-2'>radio-2.1\r\n<input type=radio name='radio-2'>radio-2.2\r\n<input type=radio name='radio-2'>radio-2.3\r\n<br>\r\n<input type=radio name='radio-3'>radio-2.1\r\n<input type=radio name='radio-3'>radio-2.2\r\n<input type=radio name='radio-3'>radio-2.3\r\n<br>\r\n<br> Selected: <b id=selectedRadioCount><\/b>\r\n<br> Unselected: <b id=unSelectedRadioCount><\/b>\r\n<\/pre>\n
We need to assign the same name<\/strong> to the radio buttons in the same group. Each group in the code above has three radio buttons inside.<\/p>\n
\r\n::root{\r\n  counter-reset: selectedRadioCount, unSelectedRadioCount;\r\n}\r\ninput[type='radio']:nth-of-type(3n){\r\n  counter-increment: unSelectedRadioCount;\r\n}\r\ninput[type='radio']:nth-of-type(3n):checked{\r\n  counter-increment: selectedRadioCount;\r\n}\r\ninput[type='radio']:not(:nth-of-type(3n)):checked{\r\n  counter-increment: unSelectedRadioCount -1 selectedRadioCount;\r\n}\r\n#selectedRadioCount::before{\r\n  content: counter(selectedRadioCount);\r\n}\r\n#unSelectedRadioCount::before{\r\n  content: counter(unSelectedRadioCount);\r\n}\r\n<\/pre>\n
The first three style rules in the above snippet are the same as the ones we applied to checkboxes, except, instead of targeting every<\/em> radio button, we target the last radio button in each group<\/strong>, which is the third one in our case (:nth-of-type(3n)<\/code>). So, we don\u2019t count all the radio buttons but only one per group<\/strong>.<\/p>\n
However, that won\u2019t give us a correct real-time result, as we have not yet given any rule for counting the other two radio buttons in the group<\/strong>. If one of them is checked it should be counted & the unchecked result should decrease at the same time.<\/p>\n
This is why we add a -1<\/code> value<\/strong> after unSelectedRadioCount<\/code> in the last style rule that targets the other two radio buttons in a group. When one of them is checked, -1<\/code> will decrease the unchecked result<\/strong>.<\/p>\n
\"Counting<\/figure>\n
The Placement of Counts<\/h2>\n
You can only see the correct result after the counting has been finished<\/strong>, i.e. after all the elements that are to be counted have been processed. This is why we need to place the element inside which we\u2019ll display the counters only after the elements to be counted<\/strong> in the HTML source code.<\/p>\n
You may not want to show the counters below the elements but somewhere else on the page. In this case, you need to reposition the counters<\/strong> using CSS properties such as translate<\/code>, margin<\/code>, or position<\/code>.<\/p>\n
But, my suggestion would be to use the CSS Grid<\/strong> so that you can create the layout of your page independent of the order of its elements in the HTML source code<\/strong>. For instance, you can easily create a grid that places the counters above or next to the input fields.<\/p>\n
Read Also:<\/strong> Introduction to the CSS Grid Layout Module<\/a><\/p>","protected":false},"excerpt":{"rendered":"
Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many donut flavors are bagged in the shopping cart? All are crucial questions users deserve answers for. So, this post will show you how to count bi-stated elements, which…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCount HTML State Changes Real-Time with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many\" \/>\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\/count-html-state-change\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Count HTML State Changes Real-Time with CSS\" \/>\n<meta property=\"og:description\" content=\"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/\" \/>\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=\"2018-01-23T15:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T09:09:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Count HTML State Changes Real-Time with CSS\",\"datePublished\":\"2018-01-23T15:01:00+00:00\",\"dateModified\":\"2018-04-09T09:09:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/\"},\"wordCount\":895,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/count-html-state-change\\\/checkbox.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/\",\"name\":\"Count HTML State Changes Real-Time with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/count-html-state-change\\\/checkbox.jpg\",\"datePublished\":\"2018-01-23T15:01:00+00:00\",\"dateModified\":\"2018-04-09T09:09:31+00:00\",\"description\":\"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/count-html-state-change\\\/checkbox.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/count-html-state-change\\\/checkbox.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/count-html-state-change\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Count HTML State Changes Real-Time with CSS\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Count HTML State Changes Real-Time with CSS - Hongkiat","description":"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many","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\/count-html-state-change\/","og_locale":"en_US","og_type":"article","og_title":"Count HTML State Changes Real-Time with CSS","og_description":"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many","og_url":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-01-23T15:01:00+00:00","article_modified_time":"2018-04-09T09:09:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Count HTML State Changes Real-Time with CSS","datePublished":"2018-01-23T15:01:00+00:00","dateModified":"2018-04-09T09:09:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/"},"wordCount":895,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/","url":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/","name":"Count HTML State Changes Real-Time with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg","datePublished":"2018-01-23T15:01:00+00:00","dateModified":"2018-04-09T09:09:31+00:00","description":"Counting is a ubiquitous task in web applications. How many unread emails do you have? How many tasks are left unchecked on your to-do list? How many","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/count-html-state-change\/checkbox.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/count-html-state-change\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Count HTML State Changes Real-Time with CSS"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bbe","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42980","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=42980"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42980\/revisions"}],"predecessor-version":[{"id":42981,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/42980\/revisions\/42981"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=42980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=42980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=42980"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=42980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}