CSS Selector

Pseudo Selector & State

We can also target pseudo selector / element in your class name by using flags(—state/selector) e.g —hover or —h. For an example:-


<div class="bgc-cccccc --hover-bgc-yellow"> Hi! I will change background color on hover</div>
<div class="bgc-cccccc --h-bgc-yellow"> Hi! I will also change background color on hover</div>

Here by using —hover flag ( can be used —h shorthand flag) we are telling to use it in :hover state

Flags:-

flags	short-flag	corresponding css selector
—active	—a or —ac	:active
—after	—af	::after
—after-hover	—afh	::after:hover
—autofill	—atf	:-webkit-autofill
—anylink	—al	:-webkit-anylink
—backdrop	—bd	::backdrop
—before	—bf	::before
—before-hover	—bfh	::before:hover
—blank	—bl	:blank
—checked	—ch	:checked
—cue	—cu	::cue
—current	—cur	:current
—default	—de	:default
—disabled	—di	:disabled
—empty	—em	:empty
—enabled	—en	:enabled
—first-child	—fc	:first-child
—first-letter	—fl	::first-letter
—first-line	—fln	::first-line
—first-of-type	—fot	:first-of-type
—focus	—f or —fo	:focus
—focus-within	—fw	:focus-within
—focus-visible	—fv	:focus-visible
—file-selector-button	—fsb	::file-selector-button
—fullscreen	—fs	::fullscreen
—hover	—h or —ho	:hover
—has	—hs	:has
—hover-after	—haf	:hover::after
—hover-before	—hbf	:hover::before
—hover-target	—htg	:hover:target
—in-range	—ir	:in-range
—indeterminate	—ind	:indeterminate
—invalid	—inv	:invalid
—is	—is	:is
—lang	—lan	:lang
—last-child	—lc	:last-child
—last-of-type	—lot	:last-of-type
—link	—ln or -l	:link
—not-	—n-	:not
—nth-child-	—nc-	:nth-child
—nth-last-child-	—nlc-	:nth-last-child
—nth-last-of-type-	—nlot-	:nth-last-of-type
—nth-of-type-	—nthot-	:nth-of-type
—marker	—m	:marker
—only-of-type	—oot	:only-of-type
—only-child	—oc	:only-child
—optional	—op	:optional
—out-of-range	—oor	:out-of-range
—placeholder	—ph	::placeholder
—placeholder-shadow	—phs	::placeholder-shadow
—popover-open	—po	:popover-open
—read-only	—ro	:read-only
—read-write	—rw	:read-write
—required	—rq	:required
—root	—rt	:root
—selection	—s	::selection
—scrollbar	—sb	::-webkit-scrollbar
—webkit-scrollbar	—sb	::-webkit-scrollbar
—scrollbar-track	—st	::-webkit-scrollbar-track
—webkit-scrollbar-track	—st	::-webkit-scrollbar-track
—scrollbar-thumb	—stm	::-webkit-scrollbar-thumb
—webkit-scrollbar-thumb	—stm	::-webkit-scrollbar-thumb
—spelling-error	—se	::spelling-error
—target	—tg	:target
—user-invalid	—ui	:user-invalid
—valid	—va	:valid
—visited	—vi or- -v	:visited
—where	—w	:where

Examples

classname	shorthand	css
`--hover-display-flex`	`--h-df`	`:hover{display: flex ;}`
`--focus-list-style-none`	`--fo-lsn`	`:focus{list-style:none;}`
`--nth-child-2n-margin-left20px`	`--nc-2n-ml20px`	`:nth-child(2n){margin-left:20px ;}`

Element Selector

Similary , we can also select or target the element by using ’_’ at the begining of class name . eg:-


<div class="_h3-c-white _p-fs-14px" >
   <h3>Hello World</h3>
   <p> Welcome to AliasCSS </p>
</div>

AliasCSS will compile above classnames as below:-


....
 
._h3-c-white h3{
   color:white ;
}
._p-fs1-4px p{
   font-size:14px ;
}

Selector Guide Table

Aliascss Classsname	compiled
`_div-df`	`._div-df div{..}`
`__div-df`	`.__div-df > div{..}`
`___div-df`	`.___div-df + div{..}`
`____div-df`	`.____div-df ~ div{..}`
`_all-c-red`	`._all-c-red *{..}`
`_child_div-df`	`._child_div-df > div{..}`
`_next_div-df`	`._next_div-df + div{..}`
`_siblings_div-df`	`._siblings_div-df ~ div{..}`

:has(), :is(), :where() and :not()

Each of these selector function accepts valid aliasCSS selector not, general css selector, this is done to make coding less confusion and maintain the same rule across every feature of the design or style system.

Selection Prefix

prefix	alias prefix	selection	Remarks
`--is()`	`--is()`	`:is()`	by default space is added before selector
`--has()`	`--hs()`	`:has()`
`--not()`	`--n()`	`:not()`
`--where()`	`--w()`	`:where()`	by default space is added before selector
`--Is()`	`--Is()`	`:is()`	Removes space before selector
`--Has()`	“	`:has()`	Adds space before selector
`--Where()`	`--W()`	`:Where()`	removes space before selector


<div class="--is(_h3,_p)-c-black/8 --Is(--hover)-bgc-black/2" >
   <h3>Hello World</h3>
   <p> Welcome to AliasCSS </p>
</div>

AliasCSS will compile above classnames as below:-


....
 
.--is\(_h3\,_p\)-c-black\/8 :is( h3, p){
   color:oklch(from black l c h/0.8 )
}
.--Is\(--hover\)-bgc-black\/2:is(:hover){
   background-color:oklch(from black l c h/0.2 )
}
/* Note the difference between --Is and --is */