You can address so-called child elements. These are elements that are directly subordinate to other elements. Admittedly, this sounds a little abstract, but it can be explained nicely using an example.
<body> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </body>
Here, body is the parent element. The p elements are each child elements of body. Based on this knowledge, the child element selector can be used.
body>p { color: blue; }
This syntax converts all paragraphs that are direct children of body to blue color.
The following example shows once again the differences between the two statements body p and body>p.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> body>p { font-family: "Courier New", Courier, monospace; font-size: 200%; } body p { color:#0066FF; } </style> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <div> <p>Paragraph 4</p> </div> </body> </html>.The first three defined p text paragraphs are direct children of body. The body p instruction assigns a blue font to all text paragraphs. body>p in turn only affects the first three text paragraphs. Therefore, these paragraphs are also displayed in a larger font.
Next, I would like to introduce you to the subsequent element selector. This selector marks an element that immediately follows another element and has the same parent element. Here is another example:
h1+p { color: blue; }
This syntax sets the text color of a paragraph to blue. However, this only applies if the paragraph directly follows a first-order heading.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> h1+p { color: blue; } </style> </head> <body> <h1>Heading</h1> <p>Paragraph 1</p> <h2>Heading</h2>
<p>Paragraph 2</p> <p>Paragraph 3</p> <div> <p>Paragraph 4</p> </div> </body> </html>Look at the result in the browser.
Only the first paragraph is displayed here in blue font. The other paragraphs are black. This is because these p elements do not follow h1, but h2.
Incidentally, CSS3 has introduced further options for subsequent elements. It is now possible to access all subsequent elements of a specific element. An example:
h1~p { color: red; }
This syntax addresses all paragraphs that follow h1.
Incidentally, it is not only possible to address elements directly. Access via the attributes of the elements is also possible.
Here are some of these selectors:
- [att] - The element only needs to contain the attribute. It is irrelevant whether a value is also transferred.
- a[href] - All hyperlinks (<a href=...>) are marked. However, this does not apply to anchor definitions (<a name=...>).
- [align=left] - Marks all elements whose align attribute has the value left.
- [attr~=value] - All elements in which value is contained in a value list separated by spaces are marked.
- attr|=value] - Selects an element if the specified value within the attribute is at the beginning of a hyphen-separated character string.
- img[width="200"] - All graphics with a width of 200 pixels are marked here.
The question naturally arises as to when you might actually need such attribute selectors. Think, for example, of a form and the checkboxes defined in it. As you know by now, checkboxes are defined via the input element. The problem with this is that the input element is also used to define normal text input fields. This means that you cannot use input to format checkboxes and text input fields differently. This is exactly where the attribute selectors come in. Take a look at the following example for a better understanding:
<body> Name: <input type="text" id="name" /> <br /> Man: <input type="checkbox" name="gender" id="gender" /> <br /> Woman: <input type="checkbox" name="gender" id="gender" /> </body>
Various form elements have been defined here
- one text input field
- two checkboxes
These fields should be formatted.
input { border:3px solid #000; width: 10em; }A border and a width are assigned to the fields.
The problem here is that the defined width should actually only be applied to the text input field, but not to the checkboxes. However, the element selector does not allow a distinction to be made between the different field types. Attribute selectors are used to make this distinction work. Here is an example of what this might look like:
input[type="checkbox"] { width: auto; }
The selector shown actually only accesses input elements that have the attribute-value combination type="checkbox".
Repetitions
CSS now finally also offers the option of addressing repetitions. The question naturally arises as to what this can be good for. These selectors are useful, for example, if you want to design every second row of a table in a different color. Before I present the available selectors, here is a typical example:
<ol id="languages"> <li>HTML</li> <li>HTML5</li> <li>CSS</li> <li>CSS3</li> <li>JavaScript</li> <li>JScript</li> <li>Java</li> <li>PHP</li> <li>Python</li> </ol>
This is a normal bulleted list. Using CSS, every third list entry should now be assigned a background color.
The selector nth-child() is used for this. Every nth child element is addressed via this selector.
#languages li:nth-child(3n) { background-color: red; }
The following selectors are available:
- :root - The :root selector can be used to address the root of a document.
- :nth-child(n) - Controls every nth element within a parent element. This selector is particularly useful if several elements are to be designed differently. n is a fixed keyword to which arithmetic operations can be applied. n can be equated with the value 1.
- :nth-last-child(n) - Controls every nth element in an element, whereby the child elements are passed through from the end.
- :nth-of-type(n)- Controls every nth element of the same HTML type at the same level.
- :nth-last-of-type(n) - Controls every nth element on the same level, whereby the elements are passed through from behind.
- :first-child - Controls the first child element within an element.
- last-child - Controls the last child element within an element.
- :first-of-type - Controls the first element of the same HTML element type within a parent element.
- last-of-type - Controls the last element of the same HTML element type within a parent element.
- only-child - Controls an element that has no sibling element and presents the only child element in the parent element.
- only-of-type - Controls an element that has no sibling elements of the same HTML type and thus represents the only child element of this type in the parent element.
- :empty - Controls empty elements.
The selectors presented here make working with HTML much easier, as complex class definitions are a thing of the past.
