Here we go, this time with more style: CSS3
If HTML5 is the natural evolution of the Web to produce documents more rich and semantic, Cascade Style Sheets 3 (CSS3) are the evolution of this other standard. Until now, we have used CSS as a tool to apply format to the content of a web page, to create our custom layout or other particular effect. With CSS3 we can get interesting effects that we were able to produce with other platforms like JavaScript or Flash.
As you realised in other posts regarding HTML5, these specifications are not completely finished and for CSS3 happens the same. This means, we will probably face that some of the new features of CSS3 are not implemented in some browsers and we should take care of it. Let's take a look to all of these features in CSS3 that we can use now.
CSS3 comes with new advanced selectors that we can use to select elements, in the past, hard to reach. Rememeber the selectors in CSS 2.1:
- - Those which use names from HTML tags: h1.
- - using identifiers: #btn_send.
- - using class names: .email.
- - universal selector: *.
- - attributes selector: img[alt].
- - son selector: body > div.
- - descendant selectors: body div.
- - adjacent selectors: h1 + a.
Is very common write the text of a document in several pharagraps and apply a distance between them. A logic way to do this is by using the property padding-bottom. But the problem is, the last paragraph will have this distance too. Until now, to solve this the developers assign another rule to the last paragraph. However, with the new selectors you will be able to select this paragraph directly and apply on it the format desired. To get this just need to use the selector: last-child.
Next, I am going to show you how to apply the famous "zebra style" to a table using CSS3 new features. This style tries to show different colors for the even and odd lines inside of a table. I'll show you how to do it with the selector: ntn-of-type(n). The code below will show all the tables in a page with even rows in green and odd rows in white.
tr: nth-of-type(even) {
background-color: #e4ffca;
}
tr: nth-of-type(odd) {
background-color: #ffffff;
}
If we would like to change the align of the cells in the first column, and show them right aligned, CSS3 has a selector just for this:
th:first-child {
text-align: right;
}
With first-child command we are selecting all the th elements but with a condition: be the first of his parent. In a similar manner we can select the last row elements with the selector: :last-child
tr:last-child {
font-size: 20px;
}
CSS3 comes with a new library of different selectors that you will need to study. I have made a selection with the most interesting selectors by their position in the document tree (DOM):
1. attribute elements:
- element[attribute^="value"]: selects all the elements with the attribute and starts with the value defined.
- element[attribute$="value"]: selects all the elements with the attribute and finish with the value defined.
- element[attribute*="value"]: selects all the elements with the attribute and contains the value difined. For instance, to select all the links pointing to an email we can use: a[href^="mailto:"]
2. General brothers selector:
- element1 ~ element 2: selects any element2, who is brother of element1 in the document and appears behind in the HTML although not necessarily immediately.
3. New pseudo-elements: they change the syntax but now is :: instead of :
- ::first-line, selects the first line of text in some element.
- ::first-letter, selects the first character of text in some element.
- ::before, selects the previous part of contect to some element.
- ::after, selects the post part of content to some element.
- ::selection, selects the text selected by the user
4. New pseudo-classes:
- element:nth-child(number), selects an element but if it is the nth son of his father (pharagraps or lists).
- element:nth-last-child(number), like the previous one but the number starts from the last son.
- element:empty, selects the element but only if it has not sons even text nodes.
- element:first-child and element:last-child, selects the elements but just if they are the first or last sons of the element.
- element:nth-of-type(number), selects the element but only if it is the nth brother element of that type.
- element:nth-last-of-type(number), like the previous one, but starts counting from the last son.
- :not(), selects elements which don't fit with some condition. To select not links, Ex: not(a).
Enough for today, we will continue soon with the second part of this CSS3 introduction which will be the end of our HTML5 and CSS3 post series.
0 comments:
Post a Comment