CSS Selectors Sets

README.md

SELECTOR LIBRARY

This is a collection of css selectors organized by various terms. This can be used for reference or to build long selectors as needed

Content Categories

Each HTML element must abide by rules defining what kind of content it can have. These rules are grouped into content models common to several elements. Each HTML element belongs to zero, one, or multiple content models, each setting rules that the element's content must follow in an HTML-conformant document.

selectors.json

{
  "flow": [
    "a", "abbr", "address", "map area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "details", "dfn", "dialog", "div", "dl", "em", "embed", "fieldset", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "i", "iframe", "img", "input", "ins", "kbd", "label", "link[itemprop]", "main", "map", "mark", "MathML math", "menu", "meta[itemprop]", "meter", "nav", "noscript", "object", "ol", "output", "p", "picture", "pre", "progress", "q", "ruby", "s", "samp", "script", "style[scoped]", "section", "select", "slot", "small", "span", "strong", "sub", "sup", "SVG svg", "table", "template", "textarea", "time", "u", "ul", "var", "video", "wbr"
  ],
  "block": [
    "address", "article", "aside", "blockquote", "canvas", "dd", "div", "dl", "fieldset", "figcaption", "figure", "figcaption", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "li", "main", "nav", "noscript", "ol", "output", "p", "pre", "section", "table", "tfoot", "ul", "video"
  ],
  "inline": [
    "b", "big", "i", "small", "tt", "abbr", "acronym", "cite", "code", "dfn", "em", "kbd", "strong", "samp", "time", "var", "a", "bdo", "br", "img", "map", "object", "q", "script", "span", "sub", "sup", "button", "input", "label", "select", "textarea"
  ],
  "metadata": [
    "base", "link", "meta", "noscript", "script", "style", "template", "title"
  ],
  "sectioning": [
    "article", "aside", "nav", "section"
  ],
  "heading": [
    "h1", "h2", "h3", "h4", "h5", "h6", "hgroup"
  ],
  "phrasing": [
    "a", "abbr", "map area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "label", "link[itemprop]", "map", "mark", "MathML math", "meta[itemprop]", "meter", "noscript", "object", "output", "picture", "progress", "q", "ruby", "s", "samp", "script", "select", "slot", "small", "span", "strong", "sub", "sup", "SVG svg", "template", "textarea", "time", "u", "var", "video", "wbr"
  ],
  "embedded": [
    "audio", "canvas", "embed", "iframe", "img", "math", "object", "picture", "svg", "video"
  ],
  "interactive": [
    "a[href]", "audio[controls]", "button", "details", "embed", "iframe", "img[usemap]", "input:not([type=hidden])", "label", "object[usemap]", "select", "textarea", "video[controls]"
  ],
  "palpable": [
    "a", "abbr", "address", "article", "aside", "audio[controls]", "b", "bdi", "bdo", "blockquote", "button", "canvas", "cite", "code", "data", "details", "dfn", "div", "dl", "em", "embed", "fieldset", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "i", "iframe", "img", "input:not([type=hidden])", "ins", "kbd", "label", "main", "map", "mark", "math", "menu", "meter", "nav", "object", "ol", "output", "p", "pre", "progress", "q", "ruby", "s", "samp", "section", "select", "small", "span", "strong", "sub", "sup", "svg", "table", "textarea", "time", "u", "ul", "var", "video"
  ],
  "script-supporting": [
    "script", "template"
  ],
  "transparent": [
    "del", "ins"
  ],
  "form": {
    "flow": [
      "button", "fieldset", "input", "keygen", "label", "meter", "object", "output", "progress", "select", "textarea"
    ],
    "listed": [
      "button", "fieldset", "input", "keygen", "object", "output", "select", "textarea"
    ],
    "labelable": [
      "button", "input", "keygen", "meter", "output", "progress", "select", "textarea"
    ],
    "submittable": [
      "button", "input", "keygen", "object", "select", "textarea"
    ],
    "resettable": [
      "input","keygen","output","select","textarea"
    ],
    "buttons": [
      "button", "input[type=button]", "input[type=submit]", "input[type=reset]"
    ],
    "texty": [
      "textarea", "select", "input[type=color]", "input[type=date]", "input[type=datetime]", "input[type=datetime-local]", "input[type=email]", "input[type=month]", "input[type=number]", "input[type=password]", "input[type=range]", "input[type=search]", "input[type=tel]", "input[type=text]", "input[type=time]", "input[type=url]", "input[type=week]"
    ],
    "toggle": [
      "input[type=checkbox]", "input[type=radio]"
    ],
    "multiline": [
      "select[multiple]", "select[size]", "textarea"
    ]
  }
}

selectors.scss

/// Elements belonging to the flow content category typically contain
/// text or embedded content
$selectors-flow-content: 'a, abbr, address, article, aside, audio, b,bdo, bdi, blockquote, br, button, canvas, cite, code, command, data, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, ul, var, video, wbr';


/// Elements belonging to the sectioning content model create a section
/// in the current outline that defines the scope of header elements,
/// footer elements, and heading content.
$selectors-sectioning-content: 'article, aside, nav, section';


/// Heading content defines the title of a section, whether marked by
/// an explicit sectioning content element or implicitly defined by the
/// heading content itself.
$selectors-heading-content: 'h1, h2, h3, h4, h5, h6, hgroup';


/// Phrasing content defines the text and the mark-up it contains. Runs
/// of phrasing content make up paragraphs.
$selectors-phrasing-content: 'abbr, audio, b, bdo, br, button, canvas, cite, code, command, datalist, dfn, em, embed, i, iframe, img, input, kbd, keygen, label, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr';

/// A few other phrasing content elements belong to this category, but only if
/// a specific condition is fulfilled
$selectors-phrasing-content-fringe: 'a, map area, del, ins, link[itemprop], map, meta[itemprop]';


/// Embedded content imports another resource or inserts content from
/// another mark-up language or namespace into the document.
$selectors-embedded-content: 'audio, canvas, embed, iframe, img, math, object, svg, video';


/// Interactive content includes elements that are specifically designed
/// for user interaction.
$selectors-interactive-content: 'a, button, details, embed, iframe, keygen, label, select, textarea';

/// Some elements belong to this category only under specific conditions:
$selectors-interactive-content-fringe: 'audio[controls], img[usemap], input:not([type=hidden]), menu[type=toolbar], object[usemap], video[controls]';
$selectors-clickable-content: 'a, button, input[type=submit], input[type=reset]';

/// A content is palpable when it's neither empty nor hidden. Elements
/// whose model is flow content or phrasing content should have at least
/// one node which is palpable.
$selectors-palpable-content: '*:not(:empty)';


/// Form-associated content comprises elements that have a form owner,
/// exposed by a form attribute.
$selectors-form-content: 'button, fieldset, input, keygen, label, meter, object, output, progress, select, textarea';

/// Elements that are listed in the form.elements and fieldset.elements IDL collections.
$selectors-form-content-listed: 'button, fieldset, input, keygen, object, output, select, textarea';

/// Elements that can be associated with label elements.
$selectors-form-content-labelable: 'button, input, keygen, meter, output, progress, select, textarea';

/// Elements that can be used for constructing the form data set when the form is submitted.
$selectors-form-content-submittable: 'button, input, keygen, object, select, textarea';

/// Elements that can be affected when a form is reset.
$selectors-form-content-resettable: 'input, keygen, output, select, textarea';

/// Element that can are rendered as buttons
$selectors-form-content-buttons: 'button, input[type=submit], input[type=button], input[type=reset]';

/// Elements that accept text input
$selectors-form-text-inputs: 'textarea, select, input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week]';

/// Elements that have a toggle state
$selectors-form-toggle-inputs: 'input[type=checkbox], input[type=radio]';

/// Elements that have appear as multiline
$selectors-form-multiline-inputs: 'select[multiple], select[size], textarea';

/// Block Element Display Models
$selectors-block-elements: 'address, article, aside, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, li, main, nav, noscript, ol, output, p, pre, section, table, tfoot, ul, video';
/// Inline Element Display Models
$selectors-inline-elements: 'b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea';

A not so complete list pulled from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories