Pseudo is used to define special states or part of an HTML element. For example, to style when mouse over on an element, when it is focused or to get to some part of HTML element.
So, CSS has two types of pseudo :

• Pseudo-class : special states
• Pseudo element : about some part of HTML element

MOD CSS has its own system to use pseudo for fast conception. We can used it with any MOD properties takes in charge.
For moment, our system about pseudo-element is experimental and not complete. So, we are not going to talk about it before next version updates.

MOD CSS has its own system to use pseudo-classes.
Theoretically, all pseudo-classes are supported. We haven't tested them all but in principle, they should all work properly.

• :checked
• :hover
• :active
• :link
• :visited
• :disabled
• :valid
• :invalid
• :visited
• :focus
• :first-child
• :nth-child(n)
• etc...

                    
    <!-- on hover, focus, active ... -->
    <div mod="hover: w[100%] m[10px] p[.2rem .5rem]"></div>
    <div mod="focus: fo.wg[bold] co[lightblue]"></div> 
    <div mod="hover*focus*active: bg[#f4f4f4] bd[1px dashed gray]"></div>  
    
                

Use setting of selector to set pseudo-element.

• ::before
• ::after
• ::mark
• ::part
• etc...

                    
    <div :var="elt::before{ co['.'] bg[blue] }"></div>

    <div :var="elt::after{ bg[blue] }"></div>

    <div mod="fo.wg[bold] && before:: co[attr(xyz)] bg[pink]"></div>
    
                

Just write the pseudo-classes followed by : or two points :: with pseudo-element. Then define the properties inside.
Write the pseudo exactly without error as so that it is recognized.

                    
    <!-- ok  -->
    <div mod="hover: bg[#e6e6e6] w[95%]"></div>  
    <ul mod="last-child:fo.sz[12px] br[8px]"></ul>     
    <div mod="before:: co[attr(xyz)] bg[pink]"></div>


    <!-- Not works  -->
    <div mod="hove: bg[#e6e6e6] w[95%]"></div> //hover not hove. It will not works
    <ul mod="last_child: fo.sz[12px] br[8px]"></ul> //last-child not last_child   
    <div mod="before: co[attr(xyz)] bg[pink]"></div> //before:: not before:
    
                

You can use several pseudo-classes in a row.
In this case, setting of pseudo always ends by && to add another pseudo or properties outside of it.
If you have no more properties to set after a pseudo, do not put anything.
See examples below.

                    
    <!-- pseudo before single properties, it ends with &&  -->
    <div mod="hover:bg[pink] &&  bg[blue]"></div>   

            
    //Not works
    <div mod="hover:bg[pink] &&"></div>   
    <div mod="bg[blue] && hover:bg[pink] &&"></div> 
    
                

If you have already defined some properties or pseudo settings, new pseudo will always starts by && to make the transition between the end of the latter and the beginning of a new pseudo setting

                    
    //Good 
    <div mod="bg[blue] && hover:bg[pink]"></div> //pseudo after properties
    <div mod="focus: bg[blue] && hover:bg[pink]"></div> //twice pseudo

    
    //Not works
    <div mod="&& hover:bg[pink] &&"></div> 
    <div mod=" && focus: bg[blue] && hover:bg[pink]"></div>  
    
                

You can use pseudo-classes with our breakpoint system for responsive content. Just call appropriate breakpoint and set inside this your pseudo-class settings.

                    
    <div mod="md? hover: bg[blue]"></div> //simple breakpoint with pseudo inside
    <div mod="sm? hover:bg[pink] || md? hover: bg[blue]"></div> //Two and more breakpoints with pseudo inside
    <div mod="sm? hover:bg[pink] && fo.wg[bold] || md? hover: bg[blue] "></div> // sm, on hover background and font-weight then...
    
    // Not works
    <div mod="lg? focus:bg[blue] || md? focus:bg[red]"></div> //Unordered breakpoints