Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change colour but keeps same styles. Re: Change colour but keeps same styles.

#140513
Kitty Giraudel
Participant

The following line targets all elements with the `.flat` class.

.flat { … }

The following line targets all elements with both the `.flat` class and the `.red` class.

.flat.red { … }

The following line targets all elements with the `.red` class that are children (direct or not) of an element with the `.flat` class.

.flat .red { … }

CSS selectors have to be read from **right to left** so the last element of the selector is the **key selector** which is basically what are you styles applied to.

Everytime you encounter a space within a selector line, you change element. To put it simple, the **key selector** is what is on the right of the last space in the selector line.

When you use `.flat .red`, the key selector is `.red`. When you use `.flat.red`, the key selector is `.flat.red`.