Relative positioning demo

CSS selector will always map to an individual element. By default most declarations target the inner nodes (or inner html) of the element that was matched by the selector. I.e. p { text: "foo" } will replace the html inside <p>any html</p> to be <p>foo</p>. You can change this behavior by using standard suffixe:

  • -outer: Replaces the outer HTML of the element.
  • -add: Appends a new node inside the element.
  • -insert: Inserts a new node as the first child node in the element.
  • -before: Inserts a new node just before the element.
  • -after: Inserts a new node just after the element.
  • -inner: Explicitly states to target the inner HTML. Added in case some declarations would not target inner html by default. May be removed in later versions.

Elements demo

The HTML in this demo is always Text before <em>Text in selector target</em> Text after. Em tag has background-color: yellow in CSS. This would render "Text before Text in selector target Text after"

Suffix Code Demo
No suffix em { text: "##default##" } Text before ##default## Text after
-outer em { text-outer: "##outer##" } Text before ##outer## Text after
-add em { text-add: "##add##" } Text before Text in selector target##add## Text after
-insert em { text-insert: "##insert##" } Text before ##insert##Text in selector target Text after
-before em { text-before: "##before##" } Text before ##before##Text in selector target Text after
-after em { text-after: "##after##" } Text before Text in selector target##after## Text after
-inner em { text-inner: "##inner##" } Text before ##inner## Text after

Positioning in attributes

I tried to make the attribute positioning using pretty much the same idea as elements. Of course, it cannot be exactly the same - and I am still considering this: Does it really make sense to have these "-outer" and especially "-before" and "-after"... But this is how it's implemented now:

Default is "-inner", which in this context means the value of the attribute. Double-quotes (") are escaped with '&quot;'. The other possibilities are.

  • -outer: Replaces the entire attribute rendering name="value". No escaping.
  • -add: Appends text to the end of value. Escaped.
  • -insert: Inserts text to the beginning of the attribute. Escaped.
  • -before: Inserts arbitrary text before the attribute (no space, so you could prefix the attribute). No escaping. Might be considered hacking - may be removed.
  • -after: Inserts arbitrary text after the attribute (no space added). No escaping. Might be considered hacking - may be removed.
  • -inner: Explicitly states to target the value of the attribute. May be removed in later versions.

Attributes demo

The HTML for this demo is <input type="text" value="original value" />, which renders as .

Suffix Code Demo
No suffix input { attr: value "##default##" }
-outer input { attr-outer: value " style='color: red' value='foo' " }
-add input { attr-add: value "##add##" }
-insert input { attr-insert: value "##insert##" }
-before input { attr-before: value " style='color: green' " }
-after input { attr-after: value " style='color: blue' " }
-inner input { attr-inner: value "##inner##" }

Declarations with fixed positioning

The following declarations can not be relatively positioned. They always apply to the element where the selector points them to and attempt to add the above suffixe, results to an error.

  • change-element
  • checked
  • value
  • attr-hide
  • display