Excluding Views from Styling - Pixate/pixate-freestyle-ios GitHub Wiki

One of the conveniences of CSS is that you easily can set a style for all views of a certain type. However, there are times when you wish to style all of a given element type except for certain instances. The :not pseudo-class can be used to handle this scenario. This article discusses :not and how it can be used to prevent the styling of views and their children.

The negation pseudo-class, better known as ':not', allows you to create a selector indicating what items you do not wish to style. The negation psuedo-class takes a simple selector as its argument, meaning you can use any type of selector except another negation pseudo-class, a pseudo-element, or any combinator.

Before we can determine how to ingore a specific view, lets make sure we can select all views using IDs. The following selects three views (view1, view2, and view2) and applies a background color.

#view1, #view2, #view3 {
    background-color: rgba(green, 10%);
}

Resulting in the following in our test application.

[[all-views-by-id.jpg" width="414" height="834"/>

Note that each view shows its element type, its ID, and any associated classes in their upper-left corners.

Now, if we're fortunate enough to have this simple case, then we could ingore a view, say view2, by simply excluding its ID from the selector list.

#view1, #view3 {
    background-color: rgba(green, 10%);
}

This works fine in this case, but what if the content changes dynamically and you can't rely on IDs? This is where the negation psuedo-class can help.

If you're new to :not, it may be tempting to use something like the following:

:not(#view2) { ... }

However, this doesn't work as intended. This literally means, match any element that does not have an ID of "view2". This would match every element in the UI except "view2". This is not what we want.

We can further refine our selector by stating that we want to match views, but not a view with a "view2" ID.

view:not(#view2) { ... }

This is better, but it still suffers from a similar problem as before. It no longer selects labels, buttons, etc., but it will still select every single view, except the one with the "view2" ID. We can remedy this by further refining where in the view tree we wish to apply :not. To begin, lets style all views using a different selector.

:root > view > view {
    background-color: rgba(green, 10%);
}

This selector indicates that we wish to style all views within a top-level view. Next, we need to single out "view2" to exclude it from our selector. We can achieve this by simply appending :not(#view2) to the last view in the selector and we're done. Very simple.

:root > view > view:not(#view2) {
    background-color: rgba(green, 10%);
}

We can give ourselves more flexbility in where our views live by tagging the parent with an ID. Below, we tag the top-level view with a "top" ID. Now we can use that in our selector achieving the same result as before.

#top > view:not(#view2) {
    background-color: rgba(green, 10%);
}

We can move the #top view and it's children anywhere in the view tree and this selector will still apply.

Up to this point, we've been using IDs only. However, this approach works equally well with classes. In fact, it's more flexible to use classes when you need to exclude more than one item.

#top > view:not(.ignore) {
    background-color: rgba(green, 10%);
}

We've had a few questions about styling labels. Specifically, when you style all labels using a "label" selector, this style all labels, for example, even labels inside of buttons. We can use a similar approach as above to say that we want to style all labels except those appearing inside of a button.

:not(button) > label { ... }

In this article we've shown a number of approaches that can be used to prevent certain views from being styled. The key points being:

• Use selector lists (comma-delimited list of selectors) to specify what you want to style, exluding the items you don't want
• Select against the view tree
• Use the negation pseudo-selector to remove the items you don't want using IDs or, more flexibly, using classes

Enjoy Pixate!

[Published: 2013-05-15]