CSS Selectors

1) Universal selector

|> HTML:

|> SCSS:


              .universal-selector * {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

2) ID selector

|> HTML:

|> SCSS:


              #id-selector {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

3) Class selector

|> HTML:

|> SCSS:


              .class-selector {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

4) Context selector

|> HTML:

|> SCSS:


              .context-selector li a {
                @apply text-red-600;
              }
              .context-selector ol li {
                @apply text-green-600;
              }

|> RESULT:

Item 1
Link 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Item 5

5) Tag selector

|> HTML:

|> SCSS:


              .tag-selector a {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Link 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Item 5

6) Link selectors

|> HTML:

|> SCSS:


              .link-selectors a:link {
                @apply text-green-600;
              }
              .link-selectors a:visited {
                @apply text-purple-600;
              }

|> RESULT:

Link 1
Item 2

Link 3.1
Item 3.2
Link 3.3

Item 4
Link 5

7) Neighbour selector

|> HTML:

|> SCSS:


              .neighbour-selector {
                li:first-of-type + li {
                  @apply text-red-600;
                }
                ol + li {
                  @apply text-green-600;
                }
                li + ol {
                  @apply text-blue-600;
                }
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

8) Direct descendant selector

|> HTML:

|> SCSS:


              .direct-descendant-selector > li {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

9) Neighbours selector

|> HTML:

|> SCSS:


              .neighbours-selector .from ~ li {
                @apply text-red-600;
              }

|> RESULT:

Item 1
From 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

10) Attribute selector

|> HTML:

|> SCSS:


              .attribute-selector {
                a[title] {
                  @apply text-red-600;
                }
                a[href] {
                  @apply text-green-600;
                }
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Link 5

11) Attribute value selector

|> HTML:

|> SCSS:


              .attribute-value-selector a[href="#"] {
                @apply text-red-600;
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Link 5

12) Attribute contains value selector

|> HTML:

|> SCSS:


              .attribute-contains-value-selector a[href*=".com"] {
                @apply text-red-600;
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Link 4
Item 5

13) Attribute starts with value selector

|> HTML:

|> SCSS:


              .attribute-starts-with-value-selector a[href^="https://"] {
                @apply text-red-600;
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Link 4
Item 5

14) Attribute ends with value selector

|> HTML:

|> SCSS:


              .attribute-ends-with-value-selector a[href$=".jpg"] {
                @apply text-red-600;
              }
              .attribute-ends-with-value-selector a[href$=".png"] {
                @apply text-red-600;
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Link 4
Link 5

15) Data type selector

|> HTML:

|> SCSS:


              .data-type-selector a[data-filetype="image"] {
                @apply text-red-600;
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Link 4
Link 5

16) Data type split selector

|> HTML:

|> SCSS:


              .data-type-split-selector {
                a[data-class~="red"] {
                  @apply text-red-600;
                }
                a[data-class~="green"] {
                  @apply text-green-600;
                }
                a[data-class~="blue"] {
                  @apply text-blue-600;
                }
                a[data-class~="bold"] {
                  font-weight: bold;
                }
                a[data-class~="underline"] {
                  text-decoration: underline;
                }
              }

|> RESULT:

Link 1
Item 2

Item 3.1
Link 3.2
Item 3.3

Link 4
Link 5

17) X:checked

|> HTML:


              
                
                  
                  Checkbox 1
                
                
                  
                  Checkbox 2
                
                
                  
                    
                    Radiobox 3.1
                  
                  
                    
                    Radiobox 3.2
                  
                  
                    
                    Radiobox 3.3
                  
                
                
                  
                  Checkbox 4
                
                
                  
                  Checkbox 5

|> SCSS:


              .input-check-selector {
                input[type="checkbox"]:checked,
                input[type="radio"]:checked {
                  @apply appearance-none bg-red-600;
                  width: 13px;
                  height: 13px;
                }
              }

|> RESULT:

Checkbox 1
Checkbox 2

Radiobox 3.1
Radiobox 3.2
Radiobox 3.3

Checkbox 4
Checkbox 5

18) X:after and X:before

|> HTML:

|> SCSS:


              .pseudoclass-selector li {
                @apply flex items-center;
                &::before,
                &::after {
                  content: "";
                  @apply inline-block w-2 h-2;
                }
                &::before {
                  @apply bg-red-600 mr-2;
                }
                &::after {
                  @apply bg-green-600 ml-4;
                }
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

19) X:hover

|> HTML:


              
                Item 1
                Hover me 2
                
                  Item 3.1
                  Hover me 3.2
                  Item 3.3
                
                Item 4
                Item 5

|> SCSS:


              .hover-selector a {
                @apply cursor-pointer transition;
                &:hover {
                  @apply text-red-600;
                }
              }

|> RESULT:

Item 1
Hover me 2

Item 3.1
Hover me 3.2
Item 3.3

Item 4
Item 5

20) X:not(selector)

|> HTML:

|> SCSS:


              .not-selector a:not([href="https://github.com/topics/js"]) {
                @apply text-red-600;
              }

|> RESULT:

Item 1
Link 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Item 5

21) X::first-letter and X::first-list

|> HTML:


              
                
                  Item 1: Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Architecto expedita repellendus ducimus perferendis facere
                  labore saepe suscipit a nihil, sed quod numquam mollitia
                  consequuntur exercitationem asperiores perspiciatis quasi dolore
                  amet, aliquid nesciunt nam ratione.
                
                Link 2
                
                  Item 3.1
                  Link 3.2
                  Item 3.3
                
                Item 4
                Item 5

|> SCSS:


              .pseudoelement-selector li::first-line {
                @apply text-green-600;
              }
              .pseudoelement-selector li::first-letter {
                @apply text-red-600;
              }

|> RESULT:

Item 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto expedita repellendus ducimus perferendis facere labore saepe suscipit a nihil, sed quod numquam mollitia consequuntur exercitationem asperiores perspiciatis quasi dolore amet, aliquid nesciunt nam ratione.
Link 2

Item 3.1
Link 3.2
Item 3.3

Item 4
Item 5

22) X:nth-child(n)

|> HTML:

|> SCSS:


              .nth-child-selector li:nth-child(2n + 1) {
                @apply text-red-600;
              }
              .nth-child-selector li:nth-child(2n) {
                @apply text-green-600;
              }
              .nth-child-selector > li:nth-child(2n) {
                @apply underline;
              }
              .nth-child-selector > li:nth-child(2n + 1) {
                @apply line-through;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

23) X:nth-last-child(n)

|> HTML:

|> SCSS:


              .nth-last-child-selector li:nth-last-child(1) {
                @apply text-red-600;
              }
              .nth-last-child-selector li:nth-last-child(2) {
                @apply text-green-600;
              }

|> RESULT:

Item 1
Item 2

Item 3.1
Item 3.2
Item 3.3

Item 4
Item 5

24) X:nth-of-type(n)

|> HTML:

|> SCSS:


              .nth-of-type-selector li:nth-of-type(2) {
                @apply text-red-600;
              }
              .nth-of-type-selector ol:nth-of-type(2) li:nth-of-type(1) {
                @apply text-green-600;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1
Item 4.2

Item 5

25) X:nth-last-of-type(n)

|> HTML:

|> SCSS:


              .nth-last-of-type-selector li:nth-last-of-type(2) {
                @apply text-red-600;
              }
              .nth-last-of-type-selector ol:nth-last-of-type(2) li:nth-last-of-type(1) {
                @apply text-green-600;
              }
              .nth-last-of-type-selector li:nth-last-of-type(3) {
                @apply text-blue-600;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1
Item 4.2

Item 5

26) X:first-child

|> HTML:

|> SCSS:


              .first-child-selector li:first-child {
                @apply text-red-600;
              }
              .first-child-selector > ol li:first-child {
                @apply underline;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1
Item 4.2

Item 5

27) X:last-child

|> HTML:

|> SCSS:


              .last-child-selector li:last-child {
                @apply text-red-600;
              }
              .last-child-selector > ol li:last-child {
                @apply underline;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1
Item 4.2

Item 5

28) X:only-child

|> HTML:

|> SCSS:


              .only-child-selector li:only-child {
                @apply text-red-600;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1

Item 5

29) X:only-of-type

|> HTML:

|> SCSS:


              .only-of-type-selector li:only-of-type {
                @apply text-red-600;
              }
              .only-of-type-selector ol li:only-of-type {
                @apply underline;
              }

|> RESULT:

Item 1

Item 2.1

Item 3

Item 4.1

Item 5

30) X:first-of-type

|> HTML:

|> SCSS:


              .first-of-type-selector li:first-of-type {
                @apply text-red-600;
              }
              .first-of-type-selector ol li:first-of-type {
                @apply underline;
              }

|> RESULT:

Item 1

Item 2.1
Item 2.2

Item 3

Item 4.1
Item 4.2

Item 5