Combinators

Child Next sibling After sibling Descendant Self

Viewport

Viewport width

Device

Device type Hoverable

DOM Structure

Empty Not empty Even Odd First Not first Last Not last

Interaction

Hover Focus Active Visited

State

Valid Invalid Enabled Disabled Checked Unchecked Mode

Pseudo elements

Placeholder Selection Before After Thumb

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.

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; }