Скачать или смотреть Group Select Parent & Child Elements | CSS Pseudo Class Functions | Write Less CSS Code & DO MORE

Group select parent child elements in CSS. Learn CSS functions and advanced CSS selectors to achieve amazing results in web development. You can write less CSS code yet do more using advanced CSS selectors. Not the Less, SASS or SCSS. In SCSS or Less you write less code but the output is still the same as of regular CSS file. In some cases more than regular CSS code due to additional CSS code for browser prefixing. Instead, you can use CSS Pseudo-Class Functions like 'is' or 'where' and group multiple CSS selectors to actually write less code.

Use CSS Pseudo-Class Functions. 'Is' and 'where' CSS pseudo-class functions reduce repetition in CSS markup by shortening lists of CSS selectors. In CSS we use a parent selector and then target inner elements. If there are multiple elements we have to target in CSS, we will have to repeat CSS code a lot. We can reduce CSS repetition by using is and where CSS functions.

I have experience with writing CSS in WordPress and if you also do, you know how often developers repeat parent selectors and how much bigger the code gets. So instead, in CSS we can use 'is' and 'where' CSS functions.

Keep each parent selector inside as argument and outside will be inner selectors. In this way we saved ourselves to repeat CSS selectors. And this code will not be compiled or anything. This is the CSS code that browser will handle.
Same is the case with where. You can do similar by using 'where' CSS function.

What is difference between is and where CSS functions? Difference is CSS specificity. 'Where' is more forgiving, while 'is' will give you tough time if you want to override style down the line. For is and where CSS pseudo-class functions, the difference is in specificity. is CSS pseudo-class function is a lot more specific. Where as the specificity of where is always zero. So where CSS pseudo-class function, is a lot easier to override further down the line.

Lets say if I want to override style for an element from the list of selectors, while using is CSS function, it won't be overridden. But if i use 'where' instead of 'is', it will work. So, I recommend using 'where' more than 'is'.

The 'is' and 'where' CSS pseudo-class function take a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

Web Browser Support
https://caniuse.com/mdn-css_selectors_is
https://caniuse.com/mdn-css_selectors...

Hide CSS Code
   • Hide & Protect CSS Code  
Smooth Scroll with CSS Only
   • Smooth Scroll to DIV on Different Page usi...  
Lazy Load with Only CSS
   • Lazy Load HTML Elements (Pure CSS) | Lazy ...  
CSS Flex Gap / Easy Flexbox
   • Easy Flexbox Column Spacing | Flex Gap CSS...  
CSS Only Custom Radio Buttons and Checkboxes
   • CSS Only Radio Button, Checkbox & Form Sty...  
Make Videos Responsive
   • How to Make YouTube Video Responsive in We...  
CSS Flexbox game / Learn Flexbox Easily
   • CSS Flexbox Game Play | Play Flexbox Frogg...  

More CSS Tutorials:
   • CSS  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
GitHub: https://github.com/webstylepress
#css #tutorials #functions #csstutorial #cssFunction #webdevelopment #webstylepress