css | limistah

CSS action pseudo classes

Without JavaScript, dynamic UI is possible with just CSS action class selectors. Case study Help text for input element which is only visible when the input is focused. The HTML <div class="input-cont"> <input type="text" placeholder="Focus me" autofocus /> <span class="help" data-help="Enter your email"></span> </div> To achieve the above, a span holding the help text in a data-help attribute as a sibling to the actual input. Both the input and the span are children to a parent div with class name input-cont....

CSS counters

CSS can keep count of numbers without writing any additional JavaScript. It does this by taking note the amount of time a CSS block affects a page then incrementing the counter for that block if the counter-increment rule is implemented. For example: input:invalid { counter-increment: invalid-count; } With no JavaScript at all, CSS understands that whenever there is an invalid element, it should increment the count for the invalid-count identifier....

Structural CSS Selectors

Yeah, you read that right. Let go straight into it! A Test Case Can you interprete this CSS selector query? p.title:first-of-type { color: red; } Let me think like you would: Select every P element that has the class name of title and apply the color red to the first of its type. <body> <p>Lorem Ipsum</p> <p class="title">Paragraph 2 (shows in red color)</p> </body> You think you’re right. Another test case What happens with the below:...