idea for a CSS library that would allow objects to set multiple pseudo-classes [10:21am]

[frankcollins3]

no time to parse or make points on:

.btn { flex: 1; display: flex; // border: 2px solid orange; justify-content: flex-end; margin: 2px 0; padding: 10px; }

.btn:hover { cursor: pointer; }

.btn:focus { outline: none; }

// really want to make a react framework with it's own CSS paradigm and state paradigms but few projects first.

[frankcollins3]

like so:

.btn:pseudo {
 focus {
   outline: none;
 }
hover {
 {...}
}
}

[frankcollins3]

:engage -> hits all pseudo-classes at once then you can distinguish classes. like below the :hover and :focus will have the same exact props/style-rules for either pseudoclass. they distinguish only by {cursor: pointer} considered an {.input} class but it has it's own similar rules that have to be changed.

.input:hover{
    cursor: pointer;
    outline: none;
    border: 1px dashed $dedede;
    background-color: invisible;                                
    font-weight: bolder;
}

.input:focus{
    cursor: none;
    outline: none;
    border: 1px dashed $dedede;
    background-color: invisible;                                
    font-weight: bolder;
}

[6-18 7:38am]

[frankcollins3]

also the below would be possible in that library if it came to it: in sass you could only open up to style those rules or child elements of the pseudo-class target. could not style another element with a pseudo-class in sass, 💋💋💋💋💋💋💋💋💋💋💋💋 have some sassy ideas as well:

.input:focus{
    cursor: none;
    outline: none;
    border: 1px dashed $dedede;
    background-color: invisible;                                
    font-weight: bolder;

    .input, .header {
        color: $bottledSky;
    }
}
   // afaik -> could only style child elements with that nested targeting