Attribute Selectors with Regular Expressions (Regex):
Crazy right. Let's explore.
👇
6. Complex Selectors
They use different combinators like:
a. Descendant combinator ( space )
b. Child combinator ( > )
c. Sibling combinator ( + )
d. Subsequent combinator ( ~ )
Let's see what they do:
👇
Note:
The descendant combinator (space) is recursive. For example:
ul li {...}
will style all the 'li' elements inside 'ul' even if the 'li' does not have 'ul' as direct parent.
Use it with caution!
It is advised to use child combinator ( > ) to avoid recursive styling.
👇
7. Compound Selectors
As the name suggests they are a combination of different selectors.
Let's see it in practice.
👇
Last but not least!
The Rulers of the Phantom World:
Pseudo Elements and Pseudo Classes.
They deserve a thread of their own but here's a teaser:
👇
These are the selectors available at your disposal to make wonderful experiences on the world wide web.
Go make something beautiful.
Thanks for reading.
More coming in the pipeline. Stay tuned.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
The will-change property hints the browsers what properties are going to change.
Therefore, helping the browser set up optimizations before an element is actually changed.
This is great for optimizing animations / transitions.
Here's how it's done
Although it seems cool to use will-change as much as you can to optimize the performance of the page.
It's recommended to use on elements that are sure to change like sliders, modals.
Moreover, will-change property should only be used to tackle performance issues not anticipate them.
Optimizations use machine resources to accelerate the rendering process and it can become a lot labor intensive for browser to optimize unnecessary elements.