CSS/Selectors

From Web Education Community Group

Contents 1 Type Selector 2 Universal Selector 3 Attribute Selector 4 Class Selector 5 ID Selector 6 Pseudo-classes 6.1 Dynamic pseudo-classes 6.2 The target pseudo-class 6.3 The language pseudo-class 6.4 The UI element states pseudo-classes 6.5 Structural pseudo-classes 6.6 The negation pseudo-class 7 Pseudo-elements 8 Combinators 8.1 Descendant combinator 8.2 Child combinator 8.3 Adjacent sibling combinator 8.4 General sibling combinator 9 See also

Type Selector

• elementname

Universal Selector

• *

Attribute Selector

• [attributename]
• [attributename="val"]
• [attributename~="val"]
• [attributename|="val"]
• [attributename^="val"]
• [attributename$="val"]
• [attributename*="val"]

Class Selector

• .classname

ID Selector

• #idname

Pseudo-classes

Dynamic pseudo-classes

• :link
• :visited
• :hover
• :active
• :focus

The target pseudo-class

• :target

The language pseudo-class

• :lang

The UI element states pseudo-classes

• :enabled
• :disabled
• :checked

Structural pseudo-classes

• :root
• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty

The negation pseudo-class

• :not

Pseudo-elements

• ::first-line
• ::first-letter
• ::before
• ::after

Combinators

Descendant combinator

• A B

Child combinator

• A > B

Adjacent sibling combinator

• A + B

General sibling combinator

• A ~ B

See also

• Selectors Level 3 Specification
• CSS Educational Materials for Beginners
• CSS Properties Reference