Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS multiple selectors without comma

Tags:

css

I am alittle confuse about CSS Selectors, I understand that we can group multiple css selectors with a comma if they share similar attributes, but what about multiple css selectors without commas e.g like this:

.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
like image 445
k80sg Avatar asked Dec 08 '12 20:12

k80sg


2 Answers

This selects descendants.

.ui-datepicker-rtl .ui-datepicker-prev will pick all decendants of elements with class ui-datepicker-rtl who have class ui-datepicker-prev

like image 176
Jon Taylor Avatar answered Oct 06 '22 17:10

Jon Taylor


When you use the comma, like

#menu, .item

you are saying:

all elements whose id is menu AND all elements whose class is item

When you nest selectors without the comma, like

#menu .item

you are saying

all elements that has class item inside a container whose id is menu

like image 30
Juan Avatar answered Oct 06 '22 15:10

Juan