Descendant, Child, and Adjacent Sibling Selectors: Selecting an Element Based on Hierarchy in Java

Creator Data Matrix ECC200 in Java Descendant, Child, and Adjacent Sibling Selectors: Selecting an Element Based on Hierarchy

You can select elements based on their position in the overall document hierarchy in one of three ways: descendant, child, or adjacent sibling selectors Child and adjacent sibling selectors aren t supported in Microsoft Internet Explorer 60 or earlier, so use caution if using them in your style sheets

A descendant selector selects elements based on their position in the document hierarchy Consider the following sample document:

<h1>The Martians</h1> <p>The Martians seem to have calculated their descent with amazing subtlety</p> <div> <p>Had our instruments permitted it, we might have seen the gathering trouble far back in the nineteenth century</p> </div> <div> <p> The chances against anything manlike on Mars are a million to one, he said</p> </div> </body> </html>

A type selector enables you to select all the paragraph elements, but if you want to select only the paragraphs inside the div elements, you can use a descendant selector:

div p { font-size: 9pt }

Note that the p doesn t have to be a child element of the div element, directly inside it It just has to be a descendant somewhere in the hierarchy

If you want to select an element that s a direct child of another element, you can use a child selector A child selector separates the parent and child elements with a > arrow:

div > p { font-size: 9pt }

This selector is used much less often, but it s worth a mention here You select an element in an HTML document based on the element that s adjacent to it in a document If two elements are separated with the + operator, the second element is selected only if it immediately follows the first element For example, if an h1 is immediately followed by an h2 element, the following rule applies:

h1 + h2 { margin-top: -5px }

Although you never display attributes with CSS, you can select elements based on their attributes You can use these attribute selectors in three common ways: Presence of an attribute: To test an element to see whether it contains an attribute, place the attribute name in square brackets after the element name For example, to select all img elements that have an alt attribute defined:

img[alt] { padding-right: 5px }

Exact value of an attribute: To select an element based on the value of an attribute, you add the information to the selector For example, the following line selects all img elements that have a particular src value:

img[src= bannerjpg ] { margin-top:1px }

Partial value of an attribute: You can also select an element based on the partial value of an attribute by using a ~= operator rather than an equal sign (=) and then writing a space-separated list of words For example, to select all img elements with alt text that contains newswire :

img[alt~= newswire ] { margin: 5px }

Pseudo-classes are a special type of selector that aren t based on the HTML code, but rather on conditions applied by the browser The pseudo-class is defined by using this syntax:

Pseudo-classes are most commonly used with links You can create a unique style for each of the different states of a link: unvisited, visited, active, and hover For example, the following code defines pseudo-classes for an a link:

a:link a:active a:visited a:hover { { { { color: color: color: color: black; text-decoration: none; } blue; text-decoration: none; } gray; text-decoration: none; } blue; text-decoration: underline; }

Pseudo-elements, on the other hand, are parts of an element You can use pseudo-elements to specify formatting for the first letter and first line of a block level element, such as a paragraph or heading; for example:

p:first-line: { font-size: 110%; } p:first-letter: { font-size: 300%; float: left; font-variant: small-caps; }