CSS & States

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 :

Handling Hover, Focus and other States

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.

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

Good practice | How to use it ?

Name correctly states

Just write the pseudo-class followed by : . Then define the properties inside.
Write the pseudo exactly without error as so that it is recognized.

    <!-- pseudo with multi properties  -->
    <!-- single pseudo with one properties -->
    <div :box="hover: bg[#e6e6e6] w[95%]"></div>  
    <ul :box="last-child:fo.sz[12px] br[8px]"></ul>     

    //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   

When it ends with &&

You can use several pseudo-classes in a row.
In this case, setting of pseudo selector 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> 

When it starts with &&

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

    <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>  

Coupled with breakpoints

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