Parent Selector Mixin

This JavaScript function lets you define a CSS selector list and apply a CSS rule to the parent node of any matching tags in your document.

Syntax

parent(selector, rule)

Example

Input:

parent('li', 'border: 1px solid red;')

Output:

/* li:parent */
[data-parent-unique="0"] {
  border: 1px solid red;
}

Code

function parent(selector, rule) {

  var tag = document.querySelectorAll(selector)
  var style = ''
  var count = 0

  for (var i = 0; i < tag.length; i++) {

    var attr = selector.replace(/\W+/g, '')

    tag[i].parentNode.setAttribute('data-parent-' + attr, count)

    style += '\n/* '+ selector + ':parent */\n'
             + '[data-parent-' + attr + '="' + count + '"] {\n'
             + '  ' + rule + '\n'
             + '}\n'

    count++

  }

  return style

}

Techniques Capable