AST Explorer

X-ray vision of your CSS.

CSS input

a {
	color: red;
	background: blue !important;

	#test-nested {
		color: green;
	}
}

c + b[aria-selected^="true" i] {
	border: 3px solid rgb(0 30% 0 / 50%);
}

@media (min-width: 600px) or print {
	test {
		color: blue !ie;
	}
}

AST output

StyleSheet (1)
1. children:
  1. Rule (2)
    1. children:
      1. SelectorList (20)
        
        children:
        Selector (5)
        
        children:
        TypeSelector (21)
        
        name: "a"
        namespace: null
      2. Block (7)
        
        children:
        Declaration (4)
        
        property: "color"
        value:
        Value (50)
        
        children:
        Identifier (10)
        
        name: "red"
        
        Declaration (4)
        
        property: "background"
        value:
        Value (50)
        
        children:
        Identifier (10)
        
        name: "blue"
        
        is_important: true
        
        Rule (2)
        
        children:
        SelectorList (20)
        
        children:
        Selector (5)
        
        children:
        IdSelector (23)
        
        name: "#test-nested"
        
        Block (7)
        
        children:
        Declaration (4)
        
        property: "color"
        value:
        Value (50)
        
        children:
        Identifier (10)
        
        name: "green"
  2. Rule (2)
    1. children:
      1. SelectorList (20)
        
        children:
        Selector (5)
        
        children:
        TypeSelector (21)
        
        name: "c"
        namespace: null
        
        Combinator (27)
        
        name: "+"
        
        TypeSelector (21)
        
        name: "b"
        namespace: null
        
        AttributeSelector (24)
        
        name: "aria-selected"
        value: "\"true\""
        attr_operator: "^="
        attr_flags: "i"
      2. Block (7)
        
        children:
        Declaration (4)
        
        property: "border"
        value:
        Value (50)
        
        children:
        Dimension (12)
        
        value: 3
        unit: "px"
        
        Identifier (10)
        
        name: "solid"
        
        Function (15)
        
        name: "rgb"
        value: "0 30% 0 / 50%"
        
        children:
        Number (11)
        
        value: 0
        
        Dimension (12)
        
        value: 30
        unit: "%"
        
        Number (11)
        
        value: 0
        
        Operator (16)
        
        value: "/"
        
        Dimension (12)
        
        value: 50
        unit: "%"
  3. Atrule (3)
    1. name: "media"
    2. children:
      1. AtrulePrelude (40)
        
        children:
        MediaQuery (32)
        
        children:
        Feature (33)
        
        property: "min-width"
        value:
        Dimension (12)
        
        value: 600
        unit: "px"
        
        children:
        Dimension (12)
        
        value: 600
        unit: "px"
        
        Operator (38)
        
        MediaType (34)
        
        value: "print"
      2. Block (7)
        
        children:
        Rule (2)
        
        children:
        SelectorList (20)
        
        children:
        Selector (5)
        
        children:
        TypeSelector (21)
        
        name: "test"
        namespace: null
        
        Block (7)
        
        children:
        Declaration (4)
        
        property: "color"
        value:
        Value (50)
        
        children:
        Identifier (10)
        
        name: "blue"
        
        is_important: true