Selectors - Starting with ECLoc6430 Ch9 - 143_Selectors.html

Selectors can be combined in a single selector. One can write a selector that combines a class selector and an attribute selector.

1. The simplest kind of selector is the name of the type of element that should be formatted, like h1 {color: red; }
2. A selector can use context, like h1 em {color: red; This style will be applied only to the em elements within h1 elements. The em elements found elsewhere are not affected.
3. .error {color: red; } This chooses all elements that belong to the error class.
4. #gaudi { color: red; } selector (#gaudi called ID) chooses the element with an id of gaudi, as specified by id = "gaudi" in the HTML tag. An ID may appear only once in each page.

5. strong.error { color: red; } One can be more specific by prefixing a class selector (or ID selector) with element name to target. In this case, the selector chooses the strong elements with the error class rather than every element with the error class.

6. A pseudo-element or the pseudo-class of an element is a selector that chooses a element that belong to the link pseudo-class that is the links on the page that haven't been visited.
   
   
   
   
7. You can use the square brackets to add to a selector information about the desired element’s attributes (or attributes and values). The first example targets all a elements with a title attribute, and the second targets only those that point to Wikipedia.

The wildcard, * (asterisk), matches any element name in your code. For example,

* { border: 2px solid green; }

gives every element a two-pixel, green, solid border!

Examples and codes are given in an external file which I downloaded into C:\Program Files (x86)\Ampps\www\!HTML_Prac\Misc\Castro\Code Examples\htmlcss-vqs8-code-examples-v2.zip

However, clicking on this link will download this file into the C:\Users\Owner\Downloads\ folder.

ECLoc6965 discusses links based on their state.

• a:link
• a:visited
• a:focus
• a:hover
• a:active

Each of these contain a color specification.

One may also apply :active and :hover pseudo-classes to other elements, such as p:hover
p:hover { color: red; } like the next paragraph.

Hello everybody in the whole world!
For some reason, the spanned 'whole world!'did turn to green only when the closing bracket for span was not adjacent to the closing bracket of p.

I stopped at ECLoc6543 P207