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 :box="hover: w[100%] m[10px] p[.2rem .5rem]"></div>
    <div :box="focus: fo.wg[bold] co[lightblue]"></div> 
    <div :box="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 :box="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 :box="hover: bg[#e6e6e6] w[95%]"></div>  
    <ul :box="last-child:fo.sz[12px] br[8px]"></ul>     
    <div :box="before:: co[attr(xyz)] bg[pink]"></div>


    <!-- Not works  -->
    <div :box="hove: bg[#e6e6e6] w[95%]"></div> //hover not hove. It will not works
    <ul :box="last_child: fo.sz[12px] br[8px]"></ul> //last-child not last_child   
    <div :box="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 :box="hover:bg[pink] &&  bg[blue]"></div>   

            
    //Not works
    <div :box="hover:bg[pink] &&"></div>   
    <div :box="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 :box="bg[blue] && hover:bg[pink]"></div> //pseudo after properties
    <div :box="focus: bg[blue] && hover:bg[pink]"></div> //twice pseudo

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