[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Pseudo-classes and pseudo-elements

Topics

Common

These classifications are created, because any definitions don't match to any particular part of the document tree. That's why is created two classifications, which are not depending on the document tree[S][Pw] at the same way as the element type selector. Pseudo-classes and pseudo-elements are assistance concepts. They behave like class or element type selectors. Because they don't use the class attribute or they don't have corresponding elements, they are in a way fictional. That's why they are called as pseudo-classes and pseudo-elements.

Pseudo-class is an assistant concept, which gives the possibility to classify elements like by using classes, but in some cases relating to outstanding features of the HTML-document (for example if the link has been followed or not).

Pseudo-element is an assistant concept, which is related to the presentational sub-part of the elements (like the first letter or row) resembling the way, how CSS is related with element type selectors.

Pseudo-classes

Simple element type selectors are not tied with any particular attribute inside the element. Pseudo-classes are always bound with real or fictional attributes basically exactly at the same mechanism as an element is bound with the class attribute (remember that class selectors are also bound with certain attributes). Pseudo-classes offer the possibility to express the same element differently in various states.

Especially links can have several dictions in different states and you find pseudo-classes used commonly in link presentations. The existence of link is expressed in HTML-documents with the attribute href and the presentation of states of links has been defined in HTML 3.2 with link and visited attributes for the BODY element. Pseudo-classed :link and :visited gives the possibility to express the states of links without using HTML-attributes.

Link related pseudo-classes are link pseudo-classes :link & :visited and dynamic link pseudo-classes :hover, :active and :focus. Dynamic pseudo-classes affect wider than link pseudo-classes. They concern also other elements than A and they are related only to different states of elements.

W3C: CSS2: 5.11.2 The link pseudo-classes[Pw], 5.11.3 The dynamic pseudo-classes[Pw].

Some examples of the usage of them:

a:link { color: red }
:link {color: red }
/* it is not necessary to define the element A in HTML-documents, because the browser knows anyway, that it is related with links */

Browser-specific notes:

  1. The pseudo-class :link requires, that inside the element A is the attribute href and they should not work without it. Netscape 4.x support and Opera 3.x support :link without the href attribute.

  2. Opera 3.x and Netscape 4.x support only link pseudo-classes (:link, :visited).

  3. MS IE 4.x+ supports :active according to the CSS1 specification (like a link pseudo-class) and limited :hover.

  4. Opera 4.0x support :hover and Opera 5.0x+ in addition :active (both work limited).

  5. The widest implementation is in Mozilla Gecko and Opera 7.x+ browsers, which support also :focus. They support dynamic pseudo-classes also to other elements than to the element A. That's why should always mark, which elements dynamic pseudo-classes concern (for example a:hover). In Opera :hover works widest but :focus works only with form control elements. That is in my mind correct, because A just executes a task but it doesn't stay in the user focus.

I handle the usage of link-related pseudo-classe also in the page 7[S][Pw].

At the same principle works the language pseudo-class, which is depending on language attributes as if the language attributes could create classes (:lang()).

W3C: CSS2: 5.11.4 The language pseudo-class[Pw].

Only CSS2 level pseudo-class selectors is also first-child pseudo-class (:first-child; I handle it closer in the page What is the processing order of CSS[S][Pw] and I handle in the same connection so-called adjacent sibling selector). :first-child use the order of the elements as if the order could create a class specifier. First-child pseudo-class selects the first element at the same type in the same level.

Browser-specific notes:.

  1. The language pseudo-class doesn't work in any browser. Language-dependent rules can be set of Opera and Mozilla Gecko browsers by using attribute selectors. [lang="en"] is for HTML-documents the same as :lang(en). The language condition doesn't however concern XML-documents, because they use the xml:lang attribute. The language pseudo-classes in markup language independent, when for example :lang(en) match with both xml:lang="en" and lang="en" attributes.

  2. :first-child works only in Mozilla Gecko and Opera 7.x+ browsers.

Let's twist on the basis of until now handled selectors a wireframe example from various identifier and selector types, which an individual element can have and which work at least in some browsers.

<A href="some.hml" target="new" class="own" id="another">

That element includes following identifier types, which can be referred in CSS-rules:

  1. * (*{...}) = no special identifier - the browser just identifiers, that the document have elements
  2. A (a {...}) = the element type identifier
  3. own (.own {...}) = the class selector identifier
  4. another = the id selector identifier(#another {...})
  5. class, id, href, target ([class] {...} etc.) = the attribute name as the identifier of attribute selectors = (.own {...})
  6. class="own", id="another", href="some.html", target="new" ([class="own"] {...} etc.) = the name of the attribute + the value of the attribute as identifiers of the attribute selector
  7. a:link, a:visited (a:link {...} etc.) = the identification, if the link is unvisited or visited (the static states of the link)
  8. a:hover, a:active, a:focus (a:hover {...} etc.) = the identification, which is the possible dynamic state of the link

Pseudo-elements

Pseudo-elements don't use any special attributes as their identifiers. They work together with other selectors. If pseudo-elements concern only a certain element type it is not necessary to add to them other selectors. Because in CSS2 :first-letter and :first-line concern any block level elements (according to CSS3 previous mentioned pseudo-element concern any element) it is necessary to define also the the element type, which they concern. It is possible to create fictional tag sequences for pseudo-elements. p:first-letter could be replaced for example with a tag sequence like this: <B><BIG><FONT color="#660033">?</FONT></BIG></B>. It is not however possible to replace :first-line always with a tag sequence, because lines can be broken from several places, if they don't have fixed width.

HTML 3.2 tag sequences are slow to create and they are quite an-flexible. Pseudo-elements are easy way to give to the first letter or row in paragraphs different presentation as in the other parts of the same paragraph. For example the following declaration makes the first letter of all paragraphs 120% bigger as other text in the same paragraph, makes it bold and gives it the color #660033 ([M][S][Pw]):

p:first-letter {font-size:120%; font-weight:bold; color:#660033;} /* the first-letter of paragraphs */
p:first-line {font-size:110%;} /* this definition match to the first line of paragraphs */

Browser-specific notes:.

  1. Opera 3.51-6.x, and MS IE 5.5+ for Windows and MS IE 5.0+ for Mac support them at CSS1 level. Indeed I have found that they don't always work in MS IE. In my tests the strange matter was that MS IE 6.0 for Windows supported them in my CSS-site for LI but not for P elements like MS IE 5.5 for Windows does.

  2. MS IE 5.5 for Windows doesn't support the font-size property for p:first-letter if the paragraph doesn't start with some inline-level element. Changes in the text color might in some situations cause incorrect results. It doesn't support pseudo-elements for heading elements.

  3. If the first letter is an element (for example <p><cite>Alkusana<cite>) Opera 7.x ignores all properties if they are against defined properties for the current element even :first-letter has been marked especially important (I handel importance later).

  4. Opera supports p:first-letter also in situations, where P has defined to behave as an inline level element if it should be applied only for block level elements.

  5. Opera 4.x+ and Mozilla Gecko browsers support also CSS2 level pseudo-elements (:before and :after), which I handle later in this site.


W3C: CSS2: 5.12 Pseudo-elements[Pw].

[Top]