CSS :is(),:where(),:has() and :not()
Read Time:2 Minute, 9 Second
Hello Guys today i will be discussing about some new Css pseudo class selectors
Note – Before using these selectors check out their browser support at
https://caniuse.com/
Let’s get started…
|
1 2 3 4 5 6 7 |
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"parent"</span><span class="nt">></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"element1"</span><span class="nt">></span>Element 1<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"element2"</span><span class="nt">></span>Element 2<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"element3"</span><span class="nt">></span>Element 3<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"element4"</span><span class="nt">></span>Element 4<span class="nt"></p></span> <span class="nt"></div></span> |
- :is() – Sometimes you have to provide the same styling to multiple elements , so you might do it like this
|
1 2 3 4 |
<span class="nc">.element1</span><span class="o">,</span><span class="nc">.element2</span><span class="o">,</span><span class="nc">.element3</span><span class="o">,</span><span class="nc">.element4</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span> |
It creates a chaining and sometimes can be long enough, but with :is() selector , now you can do it like this
|
1 2 3 4 5 6 7 |
<span class="nd">:is</span><span class="o">(</span><span class="nc">.element1</span><span class="o">,</span><span class="nc">.element2</span><span class="o">,</span><span class="nc">.element3</span><span class="o">,</span><span class="nc">.element4</span><span class="o">)</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="o">//</span><span class="nt">if</span> <span class="nt">the</span> <span class="nt">element</span> <span class="nt">has</span> <span class="nt">a</span> <span class="nt">parent</span> <span class="nt">then</span> <span class="nt">do</span> <span class="nt">it</span> <span class="nt">like</span> <span class="nt">this</span> <span class="nc">.parent</span> <span class="nd">:is</span><span class="o">(</span><span class="nc">.element1</span><span class="o">,</span><span class="nc">.element2</span><span class="o">,</span><span class="nc">.element3</span><span class="o">,</span><span class="nc">.element4</span><span class="o">)</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span> |
NOTE – remember to give a space before the :is() selector always if you are using it with a parent element like above.
- :where() – This selector also works same as :is(), the difference lies in the specificity, :is() takes the specificity of the elements which has higghest specificity in the group, :where() has a 0 specificity no matter how many elements grouped together
|
1 2 3 |
<span class="nc">.parent</span> <span class="nd">:where</span><span class="o">(</span><span class="nc">.element1</span><span class="o">,</span><span class="nc">.element2</span><span class="o">,</span><span class="nc">.element3</span><span class="o">,</span><span class="nc">.element4</span><span class="o">)</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span> <span class="p">}</span> |
NOTE – remember to give a space before the :where() selector always if you are using it with a parent element like above.
- :has() – This selector simply checks the presence of some element using its class , Id , tagName etc.
|
1 2 3 |
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"parent"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/></span> <span class="nt"><p></span>Child<span class="nt"></p></span> <span class="nt"></div></span> |
|
1 2 3 |
<span class="nc">.parent</span><span class="nd">:has</span><span class="o">([</span><span class="nt">type</span><span class="o">=</span><span class="s1">"checkbox"</span><span class="o">]</span><span class="nd">:checked</span><span class="o">)</span> <span class="nt">p</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span> <span class="p">}</span> |
It will check whether the parent element has an input with type checkbox and it is checked , if it is checked , the color of p tag will be red , else it will be default black.
NOTE – In case of :has() you don’t need to provide a space before it , you can see it in the example above
- :not() – This selector is used to style all the elements except the one which is inside the parameter of :not()
|
1 2 3 4 |
<span class="o">//</span> <span class="nt">Inside</span> <span class="nt">the</span> <span class="nt">parent</span> <span class="nt">element</span> <span class="nt">it</span> <span class="nt">will</span> <span class="nt">provide</span> <span class="nt">the</span> <span class="nt">color</span> <span class="nt">red</span> <span class="nt">to</span> <span class="nt">all</span> <span class="nt">p</span> <span class="nt">elements</span> <span class="nt">except</span> <span class="nt">the</span> <span class="nt">last</span> <span class="nt">child</span> <span class="nt">or</span> <span class="nt">last</span> <span class="nt">p</span> <span class="nt">element</span> <span class="nt">inside</span> <span class="nt">that</span> <span class="nt">parent</span> <span class="nt">element</span> <span class="nc">.parent</span> <span class="nd">:not</span><span class="o">(</span><span class="nt">p</span><span class="nd">:nth-last-child</span><span class="o">(</span><span class="err">1</span><span class="o">))</span><span class="p">{</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span> |
NOTE – remember to give a space before the :not() selector always if you are using it with a parent element like above.
THANK YOU FOR CHECKING THIS POST
You can contact me on –
Instagram – https://www.instagram.com/supremacism__shubh/
LinkedIn – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email – [email protected]
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ –> https://www.buymeacoffee.com/waaduheck <–
Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit
https://dev.to/shubhamtiwari909/tostring-in-js-27b
https://dev.to/shubhamtiwari909/join-in-javascript-4050
https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
Source: https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd
Tag Cloud
Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
