Web Development Portfolio

11 CSS Selectors for Your Next Web Development Project

Example 1: Element Selector

Selects all elements of a specified type.

            
                /* CSS code example */
                p {
                    /* CSS properties */
                }

Example 2: Class Selector

Selects elements with a specific class attribute.

            
                /* CSS code example */
                .example-class {
                    /* CSS properties */
                }

Example 3: ID Selector

Selects an element with a specific ID attribute.

            
                /* CSS code example */
                #example-id {
                    /* CSS properties */
                }

Example 4: Descendant Selector

Selects elements that are descendants of a specified element.

            
                /* CSS code example */
                parent descendant {
                    /* CSS properties */
                }

Example 5: Child Selector

Selects elements that are direct children of a specified element.

            
                /* CSS code example */
                parent > child {
                    /* CSS properties */
                }

Example 6: Adjacent Sibling Selector

Selects an element that is directly adjacent to another element.

            
                /* CSS code example */
                sibling + adjacent {
                    /* CSS properties */
                }

Example 7: General Sibling Selector

Selects elements that are siblings of a specified element.

            
                /* CSS code example */
                sibling ~ general-sibling {
                    /* CSS properties */
                }

Example 8: Attribute Selector

Selects elements with a specific attribute or attribute value.

            
                /* CSS code example */
                [attribute="value"] {
                    /* CSS properties */
                }

Example 9: :hover Pseudo-class

Selects an element when it is being hovered over.

            
                /* CSS code example */
                selector:hover {
                    /* CSS properties */
                }

Example 10: :nth-child() Pseudo-class

Selects elements based on their position within a parent element.

            
                /* CSS code example */
                parent :nth-child(n) {
                    /* CSS properties */
                }

Example 11: :not() Pseudo-class

Selects elements that do not match a specified selector.

            
                /* CSS code example */
                :not(selector) {
                    /* CSS properties */
                }