HTML and CSS Reference
In-Depth Information
Useful Selectors to Replace JavaScript
It was commonplace to select the last child element of another element using
JavaScript, and apply a class to it to remove margin or padding to floated
elements. If you had a three-column layout with multiple rows, you could have
also selected every third child within an element using JavaScript and applying
classes to it. With CSS3, you no longer need to do this.
You can select the last child of an element using the :last-child pseudoclass.
For instance, if you wanted to select the last li within a ul , you would use the
following CSS.
ul li:last-child {
margin-right: 0px;
}
You can also do the same to select the nth child of any element. Using the :nth-
child , :nth-last-child , :nth-of-type , and :nth-last-of-type , you can make
selections based on child index and child type and index, as shown in Table 5-5.
Table 5-5 . nth Selectors
Selector
Description
:nth-child(index)
Selects elements that are at the specified index of its
parent
:nth-last-child(index)
Selects elements that are at the specified index, starting
from the end of its parent
:nth-of-type(index)
Selects elements that are at the specified index of its
parent, while only including elements of the same type
when comparing indexes
:nth-last-of-type(index) Selects elements that are at the specified index of its
parent, starting from the end, while only including
elements of the same type when comparing indexes
For example, if you wanted to select every third li in a ul and make the text
gray, you would use the following CSS style.
ul li:nth-child(3) {
color: #CCCCCC;
}
As you can see, there are many new CSS selectors available to make styling
your mobile web app easier. There are much more advanced selectors to
choose from.
 
Search WWH ::




Custom Search