Selector (CSS)

Example

Consider this CSS:

css

                                        
                                            p
                                            {
                                            color
                                            :
                                            green;
                                            }
                                            div.warning
                                            {
                                            width
                                            :
                                            100%;
                                            border
                                            :
                                            2px solid yellow;
                                            color
                                            :
                                            white;
                                            background-color
                                            :
                                            darkred;
                                            padding
                                            :
                                            0.8em 0.8em 0.6em;
                                            }
                                            #customized
                                            {
                                            font
                                            :
                                            16px Lucida Grande,
                                            Arial,
                                            Helvetica,
                                            sans-serif;
                                            }

The selectors here are "p" (which applies the color green to the text inside any <p > element), "div.warning" (which makes any <div > element with the class "warning" look like a warning box), and "#customized" , which sets the base font of the element with the ID "customized" to 16-pixel tall Lucida Grande or one of a few fallback fonts.

We can then apply this CSS to some HTML, such as:

html

                                        
                                            
                                                
                                                    <
                                                    p
                                                
                                                >
                                            
                                            This is happy text.
                                            
                                                
                                                    </
                                                    p
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    div
                                                
                                                class
                                                
                                                    =
                                                    "
                                                    warning"
                                                
                                                >
                                            
                                            Be careful! There are wizards present, and they are quick to anger!

                                            
                                                
                                                    </
                                                    div
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    div
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    customized"
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    p
                                                
                                                >
                                            
                                            This is happy text.
                                            
                                                
                                                    </
                                                    p
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    div
                                                
                                                class
                                                
                                                    =
                                                    "
                                                    warning"
                                                
                                                >
                                            
                                            Be careful! There are wizards present, and they are quick to anger!

                                            
                                                
                                                    </
                                                    div
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    div
                                                
                                                >

The resulting page content is styled like this:

CSS Selector

Selector (CSS)

Example

See also