JSFiddle - React, Tailwind, and code Playground

by pmn4

HTML

<div>
    <label>No "for" Attribute</label>
    <input id="nope" placeholder="None" />
</div>
<div>
    <label for="">Empty "for" Attribute</label>
    <input id="empty" placeholder="Empty" />
</div>
<div>
    <label for="nice">"for" Attribute!</label>
    <input id="nice" placeholder="Nice!" />
</div>

CSS

/* all labels */
label {
    color: blue;
}

/* all labels with a "for" attribute */
label[for] {
    color: red;
}

/* all labels with a non-empty "for" attribute */
label[for]:not([for=""]) {
    color: green;
    cursor: pointer;
}



/*********** formatting for this fiddle ***********/
label {
    display: block;
    float: left;
    width: 150px;
}
}