CSS Selector Cheat Sheet

CSS Simple Selectors

Used for selecting elements based on simple attributes like element name, ID, or class.

• Element Selector: Selects all elements of a given type.
• Syntax: <elementname>
• Example: button
• ID Selector: Selects an element with a specific ID.
• Syntax: #<idvalue>
• Example: #firstname
• Class Selector: Selects all elements with a specific class.
• Syntax: .<classname>
• Example: .gender
• Universal Selector: Selects all elements.
• Syntax: *
• Example: *

CSS Attribute Selectors

Used to select elements based on attributes and their values.

• Attribute Name Selector: Selects elements with a specific attribute, regardless of its value.
• Syntax: [attributename]
• Example: button[placeholder]
• Attribute Value Selector: Selects elements where the attribute has a specific value.
• Syntax: [attributename='attribute-value']
• Example: button[placeholder='firstname']
• Partial Match - Whole Word (~): Matches elements whose attribute value contains a specific word.
• Syntax: [attributename~='word']
• Example: button[placeholder~='question']
• Partial Match - Contains Text (*): Matches elements whose attribute value contains the specified text.
• Syntax: [attributename*='text']
• Example: button[placeholder*='ques']
• Starts With - Whole Word (|): Matches elements whose attribute value starts with the specified word.
• Syntax: [attributename|='word']
• Example: button[placeholder|='question']
• Starts With - Text (^): Matches elements whose attribute value starts with the specified text.
• Syntax: [attributename^='text']
• Example: button[placeholder^='que']
• Ends With - Text ($): Matches elements whose attribute value ends with the specified text.
• Syntax: [attributename$='text']
• Example: button[placeholder$='tion']

CSS Combinator Selectors

Combinators define relationships between elements. These selectors allow you to select elements based on their relationships with other elements.

• Descendant Selector: Selects all elements that are descendants of a specified element.
• Syntax: ancestor descendant
• Example: .container select
• Child Selector: Selects all direct children of a specified element.
• Syntax: parent > child
• Example: .container > select
• Adjacent Sibling Selector: Selects the first sibling immediately following the specified element.
• Syntax: previous + next
• Example: .container + select
• General Sibling Selector: Selects all siblings following the specified element.
• Syntax: previous ~ siblings
• Example: .container ~ select

CSS Conditions

Sometimes multiple selectors are needed to identify a specific element. You can combine selectors using conditions like and, or, and not.

• AND Condition: Selects elements that match all conditions.
• Syntax: tagname[attribute1][attribute2]
• Example: input[class='select'][type='major']
• OR Condition: Selects elements that match either condition.
• Syntax: selector1, selector2
• Example: input[class='select'], [type='major']
• NOT Condition: Excludes elements that match the specified condition.
• Syntax: :not(selector)
• Example: input.button:not([type='xbutton'])

CSS Pseudo-Classes

Pseudo-classes target elements based on their position or state in the document, without needing to modify the HTML structure.

• First Child (:first-child): Selects the first child of a parent element.
• Example: div.class:first-child
• Last Child (:last-child): Selects the last child of a parent element.
• Example: button:last-child
• Nth Child (:nth-child(n)): Selects the nth child of a parent element.
• Example: button:nth-child(3)
• First of Type (:first-of-type): Selects the first element of its type within a parent element.
• Example: .container > br:first-of-type
• Last of Type (:last-of-type): Selects the last element of its type within a parent element.
• Example: .container > br:last-of-type
• Nth of Type (:nth-of-type(n)): Selects the nth element of its type within a parent element.
• Example: .container > br:nth-of-type(4)

CSS Pseudo-Elements

Pseudo-elements are used to style specific parts of elements.

• ::before: Adds content before the content of an element.
• Example: button::before
• ::after: Adds content after the content of an element.
• Example: button::after
• ::first-letter: Styles the first letter of the text content of an element.
• Example: p::first-letter
• ::first-line: Styles the first line of text in a block-level element.
• Example: p::first-line