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
https://codepen.io/hritik545/pen/oRgaRG
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