Self Selector - tomhodgins/process-css-demo GitHub Wiki

We use the custom selector :--self as a placeholder in selectors in situations where a CSS is scoped to an element, for that element itself. When usiang features like @--element queries or other custom at-rules that contain rules that may conditionally apply to one or more elements on the page at unique times, we will use :--self in these plugins consistently.

This is similar to the :self meta-selector used in EQCSS or the [--self] custom selector used in caffeinated style sheets and supported with many of the custom at-rule plugins for jsincss.

How it works

Suppose we have three <input> elements on a page, and an element query that says: “When any element matching the CSS selector input has a minimum character count of at least 5 characters, apply all of these CSS rules inside”:

@--element input and (min-characters: 5) {
  input {
    background: lime;
  }
}

What would happen if one <input> had 5+ characters would be that the rule held inside, input { background: lime } would be applied to the page, which would result in all three <input> elements gaining the new style.

Often this is not what you want when you're writing at-rules that are conditional based on one or more elements on the page, something that's like a 'scoped stylesheet' that only affects one element and its children. For situations like this, like if you only wanted those <input> in our hypothetical example who had 5+ characters themselves to gain the background: lime, then we could use :--self to indicate that this is scoped to only those elements that pass the condition(s):

@--element input and (min-characters: 5) {
  :--self {
    background: lime;
  }
}

Now this rule will only apple to those <input> elements that have 5+ characters at that moment and will not affect the styles of the other <input> elements on the page.

⚠️ **GitHub.com Fallback** ⚠️