Self

Syntax

Class
Properties
@/B
{self} > {B}
@~B
{self} ~ {B}
@+B
{self} + {B}
@/../B
{self} {B}

 

Use the self selector (@) when the generated code is outside your control, like when embedding a WYSIWYG editor.

Using the self selector (@) with the child (/), next sibling (+) and after sibling (~) selectors together is not recommended but may be okay in certain circumstances. Use your judgement.

WARNING 1: Using the self and descendant selectors ( @/../ ) together makes reasoning about your CSS much, much harder. Use it only as a last resort, when the code in the subtree is outside your control.

WARNING 2: Using the self selector makes rendering your website somewhat slower compared to applying styles directly on the targeted elements. Use it sparingly.

<div class="t1 flex flex-center"> <div class="t1 w-32 h-32 m-8 bg-c-blue shadow-4-40"></div> <div class="t1 w-32 h-32 m-8 bg-c-blue shadow-4-40"></div> <div class="t1 w-32 h-32 m-8 bg-c-blue shadow-4-40"></div> <div class="t1 w-32 h-32 m-8 bg-c-blue shadow-4-40"></div> <div class="t1 w-32 h-32 m-8 bg-c-blue shadow-4-40"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Give a top-border to all direct children except the first one.
t1 @/not-first:bt-1-black
.t1.\@\/not-first\:bt-1-black > *:not(:first-child) { border-top: 1px solid #000000; }
Set the text color of all elements within the subtree of the current element to black.
t1 @/../color-black
.t1.\@\/\.\.\/color-black * { color: #000000; }
Adding the self selector by itself has no effects.
t1 @color-black
.t1.\@color-black { color: #000000; }
Set the text color of all anchors within the subtree of the current element to black.
t1 @/../a:color-black
.t1.\@\/\.\.\/a\:color-black a { color: #000000; }