To select something that is descended from (enclosed within)
some other selector, just put whitespace between the two
selectors: article p { background-color: #ffc; }
gives all of the paragraphs (but not the heading> in this
section a pale yellow background.
In ac ipsum vitae dui pharetra sollicitudin. Nulla venenatis suscipit dolor, nec elementum velit porta sit amet. Morbi maximus ultricies nulla, vitae sodales ipsum varius et. Aenean faucibus neque eu eros volutpat venenatis. Sed mollis ornare erat, at vehicula sem interdum id. Quisque ac placerat leo. Etiam vitae eros id ligula interdum fermentum ac a elit. Nulla ac leo sem. Aliquam rhoncus massa nisl, sed convallis sapien fringilla at. Nulla eleifend odio nec facilisis consectetur. Maecenas id facilisis eros. Aenean vel lectus vel ante dapibus sodales. Quisque varius a nulla quis fermentum. Suspendisse potenti.
Duis consequat nisl eget ipsum vulputate, ut hendrerit tortor semper. Integer magna nulla, faucibus venenatis nisl viverra, tristique placerat leo. Vestibulum ultricies, nibh sed sollicitudin aliquam, enim justo accumsan enim, at consequat urna nunc suscipit nisi. Fusce vel mauris quis lacus lacinia pulvinar. In pretium ante vitae metus egestas, in mollis nulla tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas faucibus, risus et dignissim porta, augue lectus faucibus massa, ac cursus eros mi eu odio. Vestibulum vulputate vitae nunc nec sagittis. Phasellus pharetra rutrum porta.
Proin a semper nunc, eget lacinia sapien
Pellentesque fringilla, ipsum ac mollis sollicitudin, lectus metus lobortis velit, quis interdum magna urna et justo. Nulla efficitur mollis laoreet. Duis posuere nulla vitae tellus posuere venenatis. Aliquam efficitur nisl a diam accumsan, ut egestas turpis mollis. Sed vel odio vel neque aliquam pulvinar. Praesent quis diam vel justo hendrerit feugiat. Nullam rutrum sit amet ligula non imperdiet. Nam ultricies risus ante, tincidunt dignissim eros laoreet et. Vestibulum lacinia vel quam eget venenatis. Ut ultricies augue auctor, condimentum nulla a, porttitor velit. Suspendisse et quam et nibh consectetur rutrum. Aenean bibendum massa sit amet tortor sodales commodo. Aenean imperdiet ultrices erat, eget dapibus est porttitor vitae. Nullam eu massa pharetra, pulvinar odio in, pellentesque ex.
Nulla purus dui, feugiat vitae posuere in, sagittis at elit. Sed mi erat, accumsan nec urna id, condimentum sagittis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse in posuere est. Phasellus molestie neque scelerisque mauris facilisis lobortis. Maecenas sagittis felis quis erat pellentesque eleifend. Donec vel lorem eu ligula dictum rhoncus a eu tellus. Nullam vitae nulla euismod, lacinia enim ac, iaculis purus. Maecenas rutrum pharetra mauris a suscipit. Phasellus elementum scelerisque leo.
Child: >
To select something that is a child of (enclosed immediately by)
some other selector, just put the greater-than symbol
(">") between the two
selectors: article > p { background-color: #cfc; }
gives all of the paragraphs directly under this article
(but still not the heading) pale green background. The paragraph
in the <aside> is not directly
within the article; it's within the aside. So this rule does
not apply to it.
In ac ipsum vitae dui pharetra sollicitudin. Nulla venenatis suscipit dolor, nec elementum velit porta sit amet. Morbi maximus ultricies nulla, vitae sodales ipsum varius et. Aenean faucibus neque eu eros volutpat venenatis. Sed mollis ornare erat, at vehicula sem interdum id. Quisque ac placerat leo. Etiam vitae eros id ligula interdum fermentum ac a elit. Nulla ac leo sem. Aliquam rhoncus massa nisl, sed convallis sapien fringilla at. Nulla eleifend odio nec facilisis consectetur. Maecenas id facilisis eros. Aenean vel lectus vel ante dapibus sodales. Quisque varius a nulla quis fermentum. Suspendisse potenti.
Duis consequat nisl eget ipsum vulputate, ut hendrerit tortor semper. Integer magna nulla, faucibus venenatis nisl viverra, tristique placerat leo. Vestibulum ultricies, nibh sed sollicitudin aliquam, enim justo accumsan enim, at consequat urna nunc suscipit nisi. Fusce vel mauris quis lacus lacinia pulvinar. In pretium ante vitae metus egestas, in mollis nulla tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas faucibus, risus et dignissim porta, augue lectus faucibus massa, ac cursus eros mi eu odio. Vestibulum vulputate vitae nunc nec sagittis. Phasellus pharetra rutrum porta.
Proin a semper nunc, eget lacinia sapien
Pellentesque fringilla, ipsum ac mollis sollicitudin, lectus metus lobortis velit, quis interdum magna urna et justo. Nulla efficitur mollis laoreet. Duis posuere nulla vitae tellus posuere venenatis. Aliquam efficitur nisl a diam accumsan, ut egestas turpis mollis. Sed vel odio vel neque aliquam pulvinar. Praesent quis diam vel justo hendrerit feugiat. Nullam rutrum sit amet ligula non imperdiet. Nam ultricies risus ante, tincidunt dignissim eros laoreet et. Vestibulum lacinia vel quam eget venenatis. Ut ultricies augue auctor, condimentum nulla a, porttitor velit. Suspendisse et quam et nibh consectetur rutrum. Aenean bibendum massa sit amet tortor sodales commodo. Aenean imperdiet ultrices erat, eget dapibus est porttitor vitae. Nullam eu massa pharetra, pulvinar odio in, pellentesque ex.
Nulla purus dui, feugiat vitae posuere in, sagittis at elit. Sed mi erat, accumsan nec urna id, condimentum sagittis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse in posuere est. Phasellus molestie neque scelerisque mauris facilisis lobortis. Maecenas sagittis felis quis erat pellentesque eleifend. Donec vel lorem eu ligula dictum rhoncus a eu tellus. Nullam vitae nulla euismod, lacinia enim ac, iaculis purus. Maecenas rutrum pharetra mauris a suscipit. Phasellus elementum scelerisque leo.
Adjacent sibling: +
Siblings are elements enclosed by the same parent element.
To select a sibling that immediately follows another sibling,
put a plus sign ("+") between the two
selectors: h1 + p { background-color: #ccf; }
gives all of the paragraphs (but not the heading> in this
section a pale yellow background.
In ac ipsum vitae dui pharetra sollicitudin. Nulla venenatis suscipit dolor, nec elementum velit porta sit amet. Morbi maximus ultricies nulla, vitae sodales ipsum varius et. Aenean faucibus neque eu eros volutpat venenatis. Sed mollis ornare erat, at vehicula sem interdum id. Quisque ac placerat leo. Etiam vitae eros id ligula interdum fermentum ac a elit. Nulla ac leo sem. Aliquam rhoncus massa nisl, sed convallis sapien fringilla at. Nulla eleifend odio nec facilisis consectetur. Maecenas id facilisis eros. Aenean vel lectus vel ante dapibus sodales. Quisque varius a nulla quis fermentum. Suspendisse potenti.
Duis consequat nisl eget ipsum vulputate, ut hendrerit tortor semper. Integer magna nulla, faucibus venenatis nisl viverra, tristique placerat leo. Vestibulum ultricies, nibh sed sollicitudin aliquam, enim justo accumsan enim, at consequat urna nunc suscipit nisi. Fusce vel mauris quis lacus lacinia pulvinar. In pretium ante vitae metus egestas, in mollis nulla tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas faucibus, risus et dignissim porta, augue lectus faucibus massa, ac cursus eros mi eu odio. Vestibulum vulputate vitae nunc nec sagittis. Phasellus pharetra rutrum porta.
Proin a semper nunc, eget lacinia sapien
Pellentesque fringilla, ipsum ac mollis sollicitudin, lectus metus lobortis velit, quis interdum magna urna et justo. Nulla efficitur mollis laoreet. Duis posuere nulla vitae tellus posuere venenatis. Aliquam efficitur nisl a diam accumsan, ut egestas turpis mollis. Sed vel odio vel neque aliquam pulvinar. Praesent quis diam vel justo hendrerit feugiat. Nullam rutrum sit amet ligula non imperdiet. Nam ultricies risus ante, tincidunt dignissim eros laoreet et. Vestibulum lacinia vel quam eget venenatis. Ut ultricies augue auctor, condimentum nulla a, porttitor velit. Suspendisse et quam et nibh consectetur rutrum. Aenean bibendum massa sit amet tortor sodales commodo. Aenean imperdiet ultrices erat, eget dapibus est porttitor vitae. Nullam eu massa pharetra, pulvinar odio in, pellentesque ex.
Nulla purus dui, feugiat vitae posuere in, sagittis at elit. Sed mi erat, accumsan nec urna id, condimentum sagittis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse in posuere est. Phasellus molestie neque scelerisque mauris facilisis lobortis. Maecenas sagittis felis quis erat pellentesque eleifend. Donec vel lorem eu ligula dictum rhoncus a eu tellus. Nullam vitae nulla euismod, lacinia enim ac, iaculis purus. Maecenas rutrum pharetra mauris a suscipit. Phasellus elementum scelerisque leo.
General sibling: ~
Siblings are elements enclosed by the same parent element.
To select a sibling that follows another sibling (immediately
or later),
put a tilde (swung dash) sign ("~") between the two
selectors: p ~ p { background-color: #fcc; }
gives all of the paragraphs that follow any other paragraph
anywhere in this
section a pale red background.
In ac ipsum vitae dui pharetra sollicitudin. Nulla venenatis suscipit dolor, nec elementum velit porta sit amet. Morbi maximus ultricies nulla, vitae sodales ipsum varius et. Aenean faucibus neque eu eros volutpat venenatis. Sed mollis ornare erat, at vehicula sem interdum id. Quisque ac placerat leo. Etiam vitae eros id ligula interdum fermentum ac a elit. Nulla ac leo sem. Aliquam rhoncus massa nisl, sed convallis sapien fringilla at. Nulla eleifend odio nec facilisis consectetur. Maecenas id facilisis eros. Aenean vel lectus vel ante dapibus sodales. Quisque varius a nulla quis fermentum. Suspendisse potenti.
Duis consequat nisl eget ipsum vulputate, ut hendrerit tortor semper. Integer magna nulla, faucibus venenatis nisl viverra, tristique placerat leo. Vestibulum ultricies, nibh sed sollicitudin aliquam, enim justo accumsan enim, at consequat urna nunc suscipit nisi. Fusce vel mauris quis lacus lacinia pulvinar. In pretium ante vitae metus egestas, in mollis nulla tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas faucibus, risus et dignissim porta, augue lectus faucibus massa, ac cursus eros mi eu odio. Vestibulum vulputate vitae nunc nec sagittis. Phasellus pharetra rutrum porta.
Proin a semper nunc, eget lacinia sapien
Pellentesque fringilla, ipsum ac mollis sollicitudin, lectus metus lobortis velit, quis interdum magna urna et justo. Nulla efficitur mollis laoreet. Duis posuere nulla vitae tellus posuere venenatis. Aliquam efficitur nisl a diam accumsan, ut egestas turpis mollis. Sed vel odio vel neque aliquam pulvinar. Praesent quis diam vel justo hendrerit feugiat. Nullam rutrum sit amet ligula non imperdiet. Nam ultricies risus ante, tincidunt dignissim eros laoreet et. Vestibulum lacinia vel quam eget venenatis. Ut ultricies augue auctor, condimentum nulla a, porttitor velit. Suspendisse et quam et nibh consectetur rutrum. Aenean bibendum massa sit amet tortor sodales commodo. Aenean imperdiet ultrices erat, eget dapibus est porttitor vitae. Nullam eu massa pharetra, pulvinar odio in, pellentesque ex.
Nulla purus dui, feugiat vitae posuere in, sagittis at elit. Sed mi erat, accumsan nec urna id, condimentum sagittis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse in posuere est. Phasellus molestie neque scelerisque mauris facilisis lobortis. Maecenas sagittis felis quis erat pellentesque eleifend. Donec vel lorem eu ligula dictum rhoncus a eu tellus. Nullam vitae nulla euismod, lacinia enim ac, iaculis purus. Maecenas rutrum pharetra mauris a suscipit. Phasellus elementum scelerisque leo.