What kind of Css is this

i have found an article online which makes the “Heart” button, The code works well , but i am confused about the css part, i have never seen this kind of Css, can anyone help me to know what kind of CSS this.
The confusing part is
[id='toggle-heart'] { position: absolute; left: -100vw; }
I have never seen [ id ] like this before.
Here is the full link for the project

Hey @atishay,
They are called attribute selectors:
Reading this might help you: https://www.w3schools.com/css/css_attribute_selectors.asp

1 Like

thanks…and what about the
[for='toggle-heart'] { color: #aab8c2; }
how and why “FOR” is used here

Also, look at this lesson on Attribute Selectors.

The [for='toggle-heart']... CSS is targeting any element with a “for” attribute with a value of ‘toggle-heart’, in the specific case of the linkned example codepen, it is targeting the label element.

Try adding something like <p for='toggle-heart'>This is a test.</p> to maybe see an example that will make it sink in. Yes, having a for attribute on a p tag doesn’t really make sense, but this will help you see how the CSS selector is targeting elements.

1 Like