CSS Grouping and Nesting

8/12/2019 CSS Grouping and Nesting

1/2


w3schools.com/css/css_grouping_nesting.asp 1/2

HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU

SHARE THIS PAGE

Like 76k

CS S BasicCSS HOME

CS S Introduction

CS S Syntax

CSS Id & Class

CS S How To

CS S StylingSty ling Backgrou nds

Sty ling Text

Sty ling Fonts

Sty ling Links

Styling Lists

Sty ling Tables

CS S Box Mode lCSS Box Model

CS S Border

CS S Outline

CS S Margin

CSS Padding

CS S AdvancedCS S Grouping/N esting

CSS Dimens ion

CSS Display

CSS Pos itioning

CS S Floating

CS S Align

CSS Pseudo-class

CSS Pseudo -elementCSS Navigation Bar

CSS Image Gallery

CSS Image Opacity

CSS Image Sprites

CSS Media Types

CSS Attribute Selectors

CSS Summary

CSS ExamplesCSS Examples

CSS Quiz

CSS Certificate

CSS ReferencesCSS Reference

CSS Selectors

CSS Reference Aural

CSS Web Safe Fonts

CSS Units

CSS Colors

CSS Color Values

CSS Color Names

CSS Color HEX

Previous Next Chapter

Previous Next Chapter

CSS Grouping and Nesting Selectors

Grouping SelectorsIn style sheets the re are often elements with the same style.

h1{color:green;}h2{color:green;}p{

color:green;}

To minimize the code, you can group se lectors.

Separate each selector with a comma.

In the example below we have grouped the sele ctors from t he code above:

Example

h1,h2,p{color:green;}

Try it yourself

Nesting SelectorsIt is possible to a pply a style for a selector within a selector.

In the e xample be low, one s tyle is specified for all p e lements, one style is specified for all elements w ithclass="marked", and a third style is spe cified only for p elements within elements with class="marked":

Example

p{color:blue;text-align:center;}.marked{background-color:red;}.marked p{color:white;}

Try it yourself

WEB HOSTING

Best Web Hosting

eUK Web Hosting

UK Reseller Hosting

Domain, Hosting & Emai

WEB BUILDING

XML Editor - Free Trial!

FREE Website BUILDER

FREE Website C reator

Best Website Templates

STATISTICS

Browser Statistics

OS Statistics

Display Statistics

Search w3schools.com:

Select Language
http://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/default.asphttp://www.w3schools.com/http://www.w3schools.com/http://www.webhosting.uk.com/cpanel-hosting.phphttp://www.googleadservices.com/pagead/aclk?sa=L&ai=CoGCa1wz-UZy4GePOigewp4HYBY-8170D15Kq4D7AjbcBEAEg5-j6AVDnhpKBBGDlwuSDpA6gAd3aj_8DyAEC4AIAqAMByAOdBKoEqAFP0C-MQTEToto_VeNKowjaQEr158YdVNMPLGV9VoNHIEVjBXD7avP2BADpnwAq7IcMU2K0LU2bd77XFArONbT2s1SG5rzmN6TwlOG2YtsKxP5VkZsIAgW8Jnv1IRdQdAauvBH2XeJuywAi9Ab8vNxiWqb0vB1wFwR69L0EiB-PyQhkiugoLhw8WQsdBo2vW_k6c9ZIhd6Ums-H1kJuAArcCFiV4NhdKhrgBAGIBgGgBgKAB4ulcA&num=1&cid=5GgzbjbW46xg4_qmxSzq8Wco&sig=AOD64_3fnuiLaBZWMPMiZQRGb-mFaTuFHA&client=ca-pub-3440800076797949&adurl=http://www.oxygenxml.com/dita_editor.html%3Fadw%3Dtrue&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CoGCa1wz-UZy4GePOigewp4HYBY-8170D15Kq4D7AjbcBEAEg5-j6AVDnhpKBBGDlwuSDpA6gAd3aj_8DyAEC4AIAqAMByAOdBKoEqAFP0C-MQTEToto_VeNKowjaQEr158YdVNMPLGV9VoNHIEVjBXD7avP2BADpnwAq7IcMU2K0LU2bd77XFArONbT2s1SG5rzmN6TwlOG2YtsKxP5VkZsIAgW8Jnv1IRdQdAauvBH2XeJuywAi9Ab8vNxiWqb0vB1wFwR69L0EiB-PyQhkiugoLhw8WQsdBo2vW_k6c9ZIhd6Ums-H1kJuAArcCFiV4NhdKhrgBAGIBgGgBgKAB4ulcA&num=1&cid=5GgzbjbW46xg4_qmxSzq8Wco&sig=AOD64_3fnuiLaBZWMPMiZQRGb-mFaTuFHA&client=ca-pub-3440800076797949&adurl=http://www.oxygenxml.com/dita_editor.html%3Fadw%3Dtrue&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CoGCa1wz-UZy4GePOigewp4HYBY-8170D15Kq4D7AjbcBEAEg5-j6AVDnhpKBBGDlwuSDpA6gAd3aj_8DyAEC4AIAqAMByAOdBKoEqAFP0C-MQTEToto_VeNKowjaQEr158YdVNMPLGV9VoNHIEVjBXD7avP2BADpnwAq7IcMU2K0LU2bd77XFArONbT2s1SG5rzmN6TwlOG2YtsKxP5VkZsIAgW8Jnv1IRdQdAauvBH2XeJuywAi9Ab8vNxiWqb0vB1wFwR69L0EiB-PyQhkiugoLhw8WQsdBo2vW_k6c9ZIhd6Ums-H1kJuAArcCFiV4NhdKhrgBAGIBgGgBgKAB4ulcA&num=1&cid=5GgzbjbW46xg4_qmxSzq8Wco&sig=AOD64_3fnuiLaBZWMPMiZQRGb-mFaTuFHA&client=ca-pub-3440800076797949&adurl=http://www.oxygenxml.com/dita_editor.html%3Fadw%3Dtrue&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CoGCa1wz-UZy4GePOigewp4HYBY-8170D15Kq4D7AjbcBEAEg5-j6AVDnhpKBBGDlwuSDpA6gAd3aj_8DyAEC4AIAqAMByAOdBKoEqAFP0C-MQTEToto_VeNKowjaQEr158YdVNMPLGV9VoNHIEVjBXD7avP2BADpnwAq7IcMU2K0LU2bd77XFArONbT2s1SG5rzmN6TwlOG2YtsKxP5VkZsIAgW8Jnv1IRdQdAauvBH2XeJuywAi9Ab8vNxiWqb0vB1wFwR69L0EiB-PyQhkiugoLhw8WQsdBo2vW_k6c9ZIhd6Ums-H1kJuAArcCFiV4NhdKhrgBAGIBgGgBgKAB4ulcA&num=1&cid=5GgzbjbW46xg4_qmxSzq8Wco&sig=AOD64_3fnuiLaBZWMPMiZQRGb-mFaTuFHA&client=ca-pub-3440800076797949&adurl=http://www.oxygenxml.com/dita_editor.html%3Fadw%3Dtrue&nm=1http://void%280%29/http://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://www.dreamtemplate.com/?ref=w3txtfreehttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink1_400Html&embed_tags=camp&utm_camp=hOUdCO-AmAMQm__j8AMhttp://www.altova.com/ref/?s=w3s_text2&q=xmlspyhttp://www.webhosting.uk.com/cpanel-hosting.phphttp://www.heartinternet.co.uk/http://www.eukhost.com/http://www.lunarpages.com/id/w3schools/goto/w3schoolshttp://w3schools.com/css/tryit.asp?filename=trycss_nestinghttp://w3schools.com/css/tryit.asp?filename=trycss_groupinghttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colornames.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_units.asphttp://w3schools.com/cssref/css_websafe_fonts.asphttp://w3schools.com/cssref/css_ref_aural.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_quiz.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_summary.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_mediatypes.asphttp://w3schools.com/css/css_image_sprites.asphttp://w3schools.com/css/css_image_transparency.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_navbar.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_pseudo_classes.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_float.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_display_visibility.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_grouping_nesting.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_margin.asphttp://w3schools.com/css/css_outline.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_boxmodel.asphttp://w3schools.com/css/css_table.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_link.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_text.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_id_class.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_intro.asphttp://w3schools.com/css/default.asphttp://www.stumbleupon.com/submit?url=http://www.w3schools.com/css/css_grouping_nesting.asp%26title%3DCSS%20Grouping%20and%20Nestinghttp://digg.com/submit?url=http://www.w3schools.com/css/css_grouping_nesting.asp&title=CSS%20Grouping%20and%20Nestinghttp://www.reddit.com/submit?url=http://www.w3schools.com/css/css_grouping_nesting.asphttp://delicious.com/save?v=5&noui&jump=close&url=http://www.w3schools.com/css/css_grouping_nesting.asp&title=CSS%20Grouping%20and%20Nestingmailto:?&subject=CSS%20Grouping%20and%20Nesting&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20http://www.w3schools.com/css/css_grouping_nesting.asphttp://twitter.com/home?status=Currently%20reading%20http://www.w3schools.com/css/css_grouping_nesting.asphttp://www.facebook.com/sharer.php?u=http://www.w3schools.com/css/css_grouping_nesting.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/sitemap/default.asp#exampleshttp://w3schools.com/sitemap/default.asp#referenceshttp://w3schools.com/sitemap/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/default.asphttp://w3schools.com/default.asphttp://www.w3schools.com/


2/2


w3schools.com/css/css_grouping_nesting.asp 2/2

REPORT ERROR | H O M E | TO P | PRINT | FORUM | A B O U T | ADVERTISE WITH US

Top 10 Tutorials

HTML Tutorial HTML5 Tutorial CSS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References

HTML/HTML5 Reference C SS 1,2,3 Reference CSS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples

HTML Examples CSS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples

SVG Examples

Quizzes

HTML Quiz HTML5 Quiz XHTML Quiz CSS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics

Browser Statistics Browser OS

Browser Display

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/about/about_advert.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/css/css_grouping_nesting.asp?output=printhttp://w3schools.com/css/css_grouping_nesting.asp#tophttp://w3schools.com/default.asphttp://w3schools.com/css/css_grouping_nesting.asphttp://www.w3schools.com/

CSS Grouping and Nesting

Documents

Transcript of CSS Grouping and Nesting