Handling selectors

MOD-CSS now supports defining/setting selectors, updating classes and using pseudo.

Update/setting class

Set new class

Just call a div and set an attribute:var.
Inside, define your class by using mod-css properties like below :

                    
    <!-- defining of class .newclass... -->
    <div :var=".newclass{ w[100%] m[10px] p[.2rem .5rem] }"></div>

    <!-- with states inside -->
    <div :var=".newclass{ w[100%] m[10px] p[.2rem .5rem] && hover: w[90%]}"></div>
    
                

Update an existing class

If you use Bootstrap for example, you can easily update any class. You can do that with other CSS Framework like Bulma, Tailwind.
You can put your setup before your element, after or at end of body.

The properties previously defined in the style sheets will be added to the new ones that you define in MOD.
If a prop already exists, MOD will replace its value with the one you just set.

                    
    <!-- updating bootstrap class btn-primary -->
    <div :var=".btn-primary{ bg[#6610f2] co[#f4f4f4] && hover*focus: bg[#195bff]  }"></div>

    <!-- now set btn-primary -->
    <button class="btn btn-primary">btn-primary</button>
    
                

Setting selector

Set/Update any selector

Beyond the possibility of defining or modifying classes, you can simply define the selectors, tags or even the most complex selectors.

                    
    <!-- Setting of mark tag in document -->
    <div :var="mark{ bg[#EC3883] co[white] br[4px] p[2px 4px] && hover:bg[#ffc4e565] co[gold] }"></div> 

    // Mark elements 
    <p>We are going to add a special highlighting to this <mark>word</mark></p>
    <div>We can <mark>try</mark> with another word.</div>
    
                

Complex selectors

Below some example with complex selector.

                
    // Some complex possibles selectors
    <div :var=".btn, .btn-0{ co[gray] }"></div>
    
    <div :var=".btn:hover{ co[gray] }"></div>

    <div :var="div a{ h[100%] val[top !important] }"></div>
    
    <div :var="div >a{ h[100%] val[top !important] }"></div>
    
    <div :var="h1,h2,h3,h4{ co[#f1e5ac88] m.tp[15px] }"></div>
   
    <div :var="[type=radio]{ w*h[1.7rem] p[4px] ape[none].. }"></div>
    
    <div :var="[name=filter]:checked + small{ co[#7995d3]  }"></div>
    
            

Setting pseudo-elements

Define ::before/ ::after

Settings of pseudo-elements ::before and ::after can be made in two ways.

                
    // With :var attributes, outside
    <div :var="elt::before{ con[url('http://www.example.com/test.png')] }"></div>
    <div :var="elt::after{ bg[blue] }"></div>
    <div :var="elt::after{ con[linear-gradient(#e66465, #9198e5)] }"></div>

    
            

                
    // With :var/:box attributes, inside
    <div :var="i { before:: con[attr(xyz)] bg[pink] && fo.sz[12px]}"></div>
    <div :var="pre { before:: con[attr(value xyz)] && after:: con['prefix'] }"></div>
    
            

Good practice

Basics

There are four basic rules to follow:

Setting with :box

In some case, you would like to set quickly a selector on a element without to create a new div.
You can use a :box attribute to do that. MOD-CSS don't remove these attributes.

                    
    <div class="Ex" :box=".Ex h3,.Ex h6, .Ex p{ tx.al[center] }">
        <h3>H3 title</h1>
        <h6>H6 tag element</h6>
        <p>Simple HTML paragraph element</p>
    </div>
    
                

Mix pseudo-element and pseudo-state

Be aware that a pseudo states cannot be embedded in a pseudo element. This is not handled by CSS3.
As a result, the code below will be rendered automatically correcting the positions of the pseudos.

                    
    <div var="elt::after{ hover: co[orange] && focus: br[2px] }"></div>

    <!-- Result-->
    elt:hover::after{ color: orange }
    elt:focus::after{ border-radius: 2px}
    
                

Call once

:var attribute can set only one selector.

                        
    //Don't work
    <div :var=".elt{ bg[blue] } .elt2{ bg[green] }"></div>

    // Work
    <div :var=".elt{ bg[blue] }"></div>
    <div :var=".elt2{ bg[green] }"></div>
    
                    

Call both :box & :var

Tips : To save time, you can place two MOD attributes on the same element.
In this case, :box must be defined before :var.

Below, see example with updating of style of a Bootstrap input text.

                    
    // We define two class
    <div :box=".form-control{ ot*bd[none] bd.bt[1px solid #505050] }" 
          :var=".form-control-2{ br[0px] bg[#50505020] && hover*focus: bg[#505050] }"></div>
    
    // Setting on form-control input
    <input type="text" class="form-control form-control-2" placeholder="Type something">