CSS for Mobile Browsers : Selectors

The classic CSS 2.1 selectors are compatible with almost every device, and for the few that don’t recognize them entirely, it may not be worth the effort to create alternatives. The mobile CSS–compatible selectors we can trust for every device are:

1. Universal: * (compatible but not recommended)

2. Element: tagName

3. Class: .className

4. Unique ID: #elementId

5. Descendant: selectorselector

6. Child: selector > selector

7. Multiple: selector, selector

8. Pseudoclasses (link, visited, active, focus): selector:pseudoclass

As we discussed previously, some mobile browsers also understand some additional styles to CSS 2.1. A compressed list of other selectors to use for these mobile browsers is:

1. Selector with attribute: selector[attribute]

2. Selector with attribute condition: selector[attribute<operator>value]

---

Note: operator can be one of the following: equals (=), contains as one value (~=), begins with (^=), ends with ($=), contains as a string (*=), or begins with and followed by hyphen (|=).

---

1. Negation: selector:not(selector)

2. Immediately preceded by: selector + selector

3. Preceded by: selector ~ selector

4. Pseudoclasses (after, before, root, nth-child(n), first-child, last-child, empty, and others): selector:pseudoclass

---

Warning: Some CSS3 selectors don’t work for mobile devices. How complex should a mobile website be, though? If it has that much complexity, perhaps we should consider simplifying.

---

CSS3 selectors should be used only for noncritical features for the basic behavior. For example, we can use one style for input tags and, only if the device supports it, another style for different input types. For very important features, we should consider using class selectors instead.

Table 1 lists the browsers’ compatibility with CSS3 selectors, as well as their ACID 3 results (on a scale of 0 to 100, with 100 being a perfect score). The ACID test is a well-known test from the Web Standards Project that evaluates how similar to the standard the implementation is on each browser.

Table 1. CSS3 selectors compatibility table

Browser/platform	CSS3 selectors compatibility	ACID 3 results
Safari	Yes	100
Android browser	Yes	93
Symbian/S60	Partial on 5th edition: problems with attribute and child selectors Poor support before 5th edition	47 (5th edition)
Nokia Series 40	None	40 (6th edition) Complete fail before
webOS	Partial	92 in webOS 1.4 Incompatible test until 1.2
BlackBerry	None
NetFront	None
Openwave (Myriad)	None
Internet Explorer	None
Motorola Internet Browser	None
Opera Mobile	Yes	99
Opera Mini	Partial in 5.0	98
Firefox on Maemo	Yes	94

If a browser has only partial support for some attribute or selector, that means the behavior is not complete. For example, the browser may not accept all the possible values, or it may render a selector properly in the original document but not apply the style if we change the DOM dynamically. This stylesheet fragment illustrates a noncritical use of CSS3 selectors:

input {
   background-color: yellow;
   border: 1px solid gray;
}
/* The next style will only work in CSS3-compatible browsers */
input[type=button] {
   background-color: silver;
}