Tutorials: Document Object Model
- the DOM, also known as the document tree, is the structure of the HTML page and how each element, attribute and text relates on a hierarchical level. The html tag is at the top of the structure.
- Each html element is called a node. An html element is from opening tag to closing tag.
- When there is a nested tag within an html element, it is called a child of that element, or a child node of the parent node.
- Tags can have multiple relationships. Within a typical web document, for instance, a <div> tag could be a sibling of another <div> tag, and a child of its parent <body> tag, as well as a descendant of the originating parent, the <html> tag. The <div> tag could be the parent node of several children nodes, including headings (<h1> - <h6>), paragraphs (<p>), lists (<ol>, <ul>, <dl>), and images, who all could have descendents as well.
Tutorials: Structural pseudo-classes
- You can target specific elements without adding an id or a class. In CSS there are four pseudo-elements that let you target specific areas of an html tag. They are a part of a tag, but not the whole tag. The four pseudo-elements are ::first-line, ::first-letter, ::first:before, and ::after. As an example, you can target the first letter of each paragraph by using the following code:
- p::first-letter {
color:#ff0000;
font-size:xx-large;
}
- p::first-letter {
- You can only have one pseudo-element per selector and it has to come at the end, like #section p::first-line.
- Structural pseudo-classes are added in CSS3 and are differentiated from pseudo-elements in CSS3 in that pseudo-classes start with one colon and pseudo-elements start with two. It is still accepted to have the older sytax of one colon. Pseudo-classes do not have restrictions on their use.
- When you use structural pseudo-classes, you can use the document tree to target unique specific elements in your HTML without having to assign IDs and classes, streamling your code even more. For instance, I can target the first-child of an HTML element, like li:nth-child(), with you supplying the position number of the element within the parenthesis (the selector's argument). If I wanted the second list item, I would write li:nth-child(2). You can also use the words even and odd, or the even more powerful formulas.
- The syntax for using a formula as an argument is an+b, where a is the size of the cycle you designate, no starts the count at zero, and b is the offset value. A wonderful explanation of this can be found at nettuts: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-work-backward-to-understand-css-structural-pseudo-classes/