Using Element Selectors - Pixate/pixate-freestyle-ios GitHub Wiki

This is the first in a new series of blog posts dedicated to best practices when using Pixate.

When styling a basic component that is used throughout UIKit, like label for example, using the label{} selector can have unintended consequences.

The label{} selector will style every label, including labels inside of buttons, labels in dialogs, etc.

In this example, I want a large label, but using label{} selector messes up my buttons.

One way to solve this problem is to style the label with a class or id selector. But if your solution calls for an element selector, you can exclude other elements from the selctor like this:

:not(button) > label {
  font-size: 20;
}

This sets all labels to use a 20 point font size, but does not alter the labels inside of buttons. You can style those labels separately, like this:

button {
  font-size: 12;
}

This approach can be taken in any case in which you want to limit a global style to a subset of views. Check out this earlier post that explains it in more depth.

[Published: 2013-10-23]