NibCSS

State modifiers

Style hover, focus, disabled and other states, plus pseudo-elements like ::before and ::placeholder.

1 min readv1

A modifier scopes a rule to a state or a part of the element. It is written before the name and ends with :.

Interaction states#

HTML
Hover, click, or Tab to me
<a href="#" nib="d=inline-block; p=10px 16px; bdrd=8px; bgc=#f1f5f9; cl=#0f172a; txd=none; ftw=600; ts=all .15s;
    hover:bgc=#4F52D9; hover:cl=#fff;
    active:tf=scale(.97);
    focus-visible:otl=3px solid #A8ABF4; focus-visible:otlo=2px">Hover, click, or Tab to me</a>

Pseudo-classes#

Group

Modifiers

Interaction

hover active focus focus-visible focus-within visited link any-link target

Forms

enabled disabled checked indeterminate default required optional valid invalid user-valid user-invalid in-range out-of-range read-only read-write placeholder-shown -webkit-autofill

Structure

first-child last-child only-child first-of-type last-of-type only-of-type empty root

Media & UI

fullscreen paused playing open modal popover-open

Pseudo-elements#

Modifier

Selects

before: / after:

generated content — set cnt (content)

placeholder:

input placeholder text

selection:

highlighted text

marker:

list bullets and numbers

first-letter: / first-line:

typographic details

file-selector-button:

the button of <input type=file>

backdrop:

the backdrop of <dialog> and fullscreen elements

-webkit-scrollbar, -webkit-scrollbar-thumb, …

custom scrollbars

HTML

Select this text — and notice the arrow is generated. 

<p nib="pos=relative; pl=22px; m=0; before:cnt='→'; before:pos=absolute; before:l=0; before:cl=#4F52D9; before:ftw=700; selection:bgc=#fde68a">
  Select this text — and notice the arrow is generated.
</p>

Forms example#

HTML
<input placeholder="you@example.com" required nib="p=10px 12px; w=260px; bdrd=8px; bd=1px solid #cbd5e1; otl=none;
  placeholder:cl=#94a3b8;
  focus:bdc=#4F52D9; focus:bxsh=0 0 0 3px rgba(79,82,217,.2);
  user-invalid:bdc=#dc2626">

Chaining#

Combine a breakpoint, dark: and any number of pseudos:

HTML
<button nib="md:dark:hover:bgc=#1e293b">
CSS
@media (min-width: 768px) {
  .dark .nib-x:hover { background-color: #1e293b }
}

Structural styling without extra classes#

HTML
  • Inbox
  • Drafts
  • Archive
<ul nib="lst=none; p=0; m=0; w=240px; bd=1px solid #e2e8f0; bdrd=10px">
  <li nib="p=10px 14px; bdb=1px solid #e2e8f0; last-child:bdb=none">Inbox</li>
  <li nib="p=10px 14px; bdb=1px solid #e2e8f0; last-child:bdb=none">Drafts</li>
  <li nib="p=10px 14px; bdb=1px solid #e2e8f0; last-child:bdb=none">Archive</li>
</ul>

Next steps#