How to use the CSS Negation and Language Selectors.

In this simple tutorial we're going to examine the negation and language pseudo selectors.
 

Now let's first examine the language pseudo selector this one is used to target an element that has the language of the specified type. You can see we have language English,french and Espanol in the lang attribute on every paragraph.(Reference to the video)


Let's now take a look at the negation pseudo selector or you can refer to it as the not selector.

This selector is used to exclude elements that would be in an otherwise full selection.so normally if we just put h5 here it's going to select all h5 elements in the document, but if you use the not pseudo selector you can specify what type of elements to not select. 

so In the video i had three h5 elements and the one in the middle has a class of class two you can see that is the type of element that I'm excluding from the selections.if you don't want to be that specific you can just use the universal selector and that covers the negation and language pseudo selectors.
 

<!DOCTYPE html>
<html>
  <head>
  <title>css :not & lang selector </title>
   <style>
      *:lang(en){
        color:red;
      }
      
      h5:not(.one){
        color:blue;
      }
    </style>>
  </head>>
 <body>>

   <p lang="en">Car </p>
   <p lang="fr">voiture </p>
  <p lang="es">coche </p>
   <p lang="en">Car </p>
   <p lang="en">Car </p>
  
  <h5 class="one">oston </h5>
   <h5 class="two">code </h5>
   <h5>cypher </h5>
  
 </body>
 </html>
collections_bookmark Category :: Css
date_range Published :: 11 months ago At: 01:37 AM
person Writer :: Timothy

YOU MAY LIKE THESE POSTS