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.
| |||||||||||||||||||
![]() | Table of topic groups > Front page of Help pages > CSS-tables - Notes > 1. Selectors and rules |
|---|
| 1. Selectors and rules | ||
|---|---|---|
HTML, BODY
|
||
|
MS IE 5.x handles MS IE accept to use
HTML Notes.
Other pages: Borders and backgrounds ([S]), Visual formatting model ([S]). Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview. |
||
FRAMESET, FRAME, NOFRAMES
|
||
MS IE supports
The functionality of navigation frames can in principle achieved
with CSS (for example |
||
LINK |
||
|
In browsers, which support
special link relations (for example |
||
DEL, INS |
||
|
Even if CSS works well, the HTML functionality doesn't. |
||
NOSCRIPT |
||
|
In principle CSS can applied to
the |
||
MARQUEE |
||
|
It is supported in MS IE IE 2.0+. It has strange default behavior. |
||
ADDRESS,
PRE, BLOCKQUOTE, H1-H6, DIV,
HR |
||
CENTER |
||
|
MS IE Windows counts dimension of block boxes incorrectly. Opera has difficulties with vertical dimensions. Only Mozilla calculates block box dimensions correctly. The element HTML notes: ADDRESS, DIV, HR.
Other pages: Borders and backgrounds ([S]). Opera Software: Web specifications supported in Opera 5 - the details. |
||
P |
||
|
Pseudo elements are supported
in MS IE and Netscape only in the newest versions. Opera supports
them from the version 3.5x. Opera 4.x-5.x or older have minor
problems with Other notes: ADDRESS.
HTML notes. |
||
DL, DT,
DD, OL, UL, LI |
||
DIR, MENU
|
||
|
Opera has excellent
implementation, because it supports Mozilla sets the default positions of list elements
differently as MS IE and Opera. Opera and MS IE use default
margin values to create relative offsets between elements, but
Mozilla use paddings. In order to avoid problems, if
default values are changed, both
Other notes: ADDRESS.
HTML notes: DIR,DL. Models: A list test page ([S]) + screen captures: Mozilla 0.6 ([S]), IE 5.5 ([S]). |
||
TABLE |
||
|
In all cases, where is possible, it is reasonable to use
|
||
CAPTION |
||
|
MS IE doesn't support the
Because Opera and Mozilla handle this element like an
independent Because Opera and Mozilla support the Opera 4.x-6.x has a problem, if |
||
COLGROUP,
COL |
||
|
In my tests have been worked |
||
THEAD, TBODY,
TFOOT |
||
|
In IE border properties don't
work always work. Even if CSS works in most cases well in Opera,
it works buggy, if Other notes: CAPTION.
HTML notes. A Model ([S] [Pw]). |
||
TR, TD,
TH |
||
MULTICOL |
||
|
Mozilla/Netscape has the default
definition to it in the /res/html.css -file. Some
CSS properties (for example Håkom Wium Lie has proposed the functionality of this element as Multi-column layout in CSS for CSS3.
HTML notes.
W3C: Multi-column layout in CSS (W3C Working Draft 22 June 1999). |
||
A +
:link, :visited, :hover,
:active, :focus + combinators |
||
|
:link and
:visited are link pseudo-classes and
they are only related to the element
Other are dynamic pseudo-classes. They don't
concern only the anchor element ( If the author
has not defined, that it concerns only the element
If pseudo-classes are combined (for example If they are used with transparent images, the author must set display-properties to them (I explain this matter in my CSS-site in a page, which is mentioned below).
HTML notes.
A model ([S] [Pw]) + an example: an old presentation page ([S]). Other pages: Selectors ([S]), Anchors and links ([S]). |
||
ABBR,
ACRONYM, CITE,
CODE, DFN, EM,
KBD, Q, SAMP,
STRONG, VAR |
||
|
The HTML implementation of MS
IE to |
||
SPAN |
||
|
|
||
B, BIG, I, SMALL,
SUB, SUP, TT |
||
|
It is recommended to replace
all of them except |
||
FONT, S,
STRIKE, U |
||
|
It recommended to replace all of them with CSS. Rules like |
||
BDO |
||
|
Normal CSS works in all of
them, but the basic HTML functionality only in MS IE. I tested
|
||
ruby,
rt |
||
|
MS IE supports also some extra properties to it. CSS notes 1: ruby-align etc.
HTML notes. |
||
BLINK, SPACER |
||
|
The HTML basic effect works
only in all Netscape/Mozilla browsers even if IE 4.x+ can apply CSS (and
common attributes) to it. Opera and Mozilla support the effect
of this element with CSS ( |
||
BR |
||
|
I found, that at least CSS notes 2: content.
HTML notes.
|
||
APPLET |
CSS can't affect to the contents of embedded objects, because the contents is handled by external program modules (java runtime environment or plug-ins applications). | |
OBJECT |
||
EMBED |
||
|
Embedded object are in the top
level and stacking by the Concerning Opera the effects of the properties to the element
|
||
IFRAME |
||
|
Like in embedded object, CSS
can't affect to the content of this element. But in principle
stacking order can work, because it doesn't use external
applications. Stacking order works best in new Netscape/Mozilla browsers. With Opera |
||
IMG |
||
|
If the image has inline-level
parent, background properties should be applied only to a one
line. MS IE works in this matter incorrectly (I handle this
matter in my CSS-site).
MS IE doesn't support
HTML notes.
Other pages: Anchors and links ([S]). Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview. |
||
MAP, AREA |
||
|
MS IE doesn't accept set dimensions for the element At least the
CSS notes 2: outline.
HTML notes. |
||
FIELDSET,
FORM |
||
ISINDEX |
||
|
Mozilla 0.6 doesn't support
|
||
BUTTON |
||
|
MS IE and Mozilla use a predefined font family but Opera doesn't. The Other notes: form-related pseudo-classes.
HTML notes. A Model ([S] [Pw]). |
||
INPUT,
SELECT, TEXTAREA |
||
|
Borders are rendered at different principle in Opera 4.x-6.x compared to MS IE and Mozilla (this matter has been changed in the Opera 7.x series). Opera 4.x-6.x have a little bit poor implementation, because background properties don't work. I have explained these matters also in other pages. Mozilla have excellent rendering, even
Other notes: form-related pseudo-classes.
CSS notes 2: outline (UI properties). HTML notes: INPUT, SELECT, TEXTAREA. A Model ([S] [Pw]). Other pages: Borders and backgrounds ([S]). W3C: User Interface for CSS3. |
||
LEGEND,
LABEL |
||
|
Background properties don't
work. Opera 4.x-6.x don't position the
HTML notes.
A Model ([S] [Pw]). Opera Software: Web specifications supported in Opera 5 - the details. |
||
OPTGROUP,
OPTION |
||
|
Mozilla has excellent support
to them like almost all form elements. Also Opera 7.0 Beta1 supports it at some level. MS IE has better CSS
implementation to |
||
:button-content, :fieldset-content,
:-moz-display-comboboxcontrol-frame,
:-moz-dummy-option,
:-moz-dropdown-list, :-moz-focus-inner,
:-moz-radio,
:-moz-select-scrolled-content,
:-moz-singleline-textcontrol-frame, :focused, :-moz-any-link, :first-node, :last-node, :-moz-list-bullet, :-moz-comment, :-moz-pi, :viewport, :viewport-scroll, :canvas, :scrolled-content, :wrapped-frame, placeholder-frame, :-moz-page, :-moz-page-sequence, :-moz-anonymous-positioned-block [_moz-option-selected], [_moz-rs-heading] |
||
:checked, :empty, :menu, :not(), :root |
||
|
Mozilla doesn't need so-called widget libraries to
define presentation to form element, because it support
proprietary pseudo-classes, proprietary properties and
some proposed CSS3-features. Proprietary features are not intended to use in normal web pages. They are UA CSS, which intention is to define default settings for (X)HTML elements. Most of them authors can in future define with User Interface for CSS3. Netscape/ Mozilla supports also other UA CSS pseudo-classes/ elements, which are not related to forms but the purpose is to implement non-standard quirky behaviors (/res/quirk.css). Most of them are proprietary but some of them have been proposed into CSS3 (this concerns also UI properties and I recommend to read also CSS notes 2).
CSS notes 2: text-align (UI values), outline (UI
properties).
W3C: CSS3 module: W3C selectors (W3C Working Draft 26 January 2001), User Interface for CSS3. |
||
LISTING,
PLAINTEXT, XMP |
||
|
They are not supported in Mozilla. The basic functionality of |
||
| Rule names and the correct order of at-rules | ||
|
All new browsers for Windows 95 allow incorrect values
to MS IE reads also Certain rules are intended only to HTML-documents, but MS IE and
Opera accepts them as to XML-documents. Some of them could work
in XML, if the browser gets the In CSS2 has been added some media dependent features, which don't work properly in MS IE and Opera. I hande those feature with the |
||
cascading order,
!important, /* comments */ |
||
|
The cascading order is
different in CSS1 and CSS2 concerning the important rule. MS IE
supports it according to CSS2 and Opera CSS1. Because I don't
have find the possibility to test user style sheets in Mozilla,
I don't know how it behaves concerning user style sheets. Even if
Opera supports I have found, that changes to property values don't always work in browsers and they have difficulties in the cascading order. It is recommended to avoid changes. For example changing of background properties might cause problems. Comments work ok in these browsers. CSS notes 1: background.
|
||
@charset |
||
@namespace |
||
|
According to DevGuru CSS2 This rule must be in external
style sheets at the beginning of the style sheet. The
Other notes: universal selectors.
W3C: CSS Namespace Enhancements (a proposal for CSS3). Other sites: DevGuru CSS2: @rules: charset; Microsoft: @charset Rule. |
||
@media, @import ...; |
||
|
All of them support necessary
media types I have found, that Note that the full screen mode in Opera is so-called presentation mode, where the Other notes: @import.
CSS Notes 2: page etc. Other pages: Text-related properties and focusing CSS in different situations ([S]). Opera Software: XML in Opera. |
||
@font-face |
||
|
According to the information Mircosoft they work in MS IE browsers starting from MS IE 4.0 for Windows, but the font file format must be either .eot or .ote, not an ordinary font file (for example .ttf). At this way the implementation is a little bit proprietary. Netscape 4.x support instead a proprietary at-rule
( Other sites:
Blooberry: At-rules;
Microsoft: @font-face Rule.
|
||
@page + :first,
:left, :right |
||
|
Even if Other notes @media.
CSS Notes 2: orphans etc. Other sites: Opera Software:Web specifications supported in Opera 5 - the details; Microsoft: @page Rule. |
||
:after,
:before |
||
|
They are well supported in Opera and Mozilla. Indeed newest versions of Opera don't support them for table cells like some earlier versions. |
||
:first-child |
||
|
I have an example of the usage of this pseudo-class in an appendix page, where I have a list item test. It is supported in Mozilla Gecko and Opera 7.x+ browsers. |
||
* |
||
*|*, ns|*, |* |
||
ns\* |
||
|
The basic universal selector ( |
||
ELEMENT
ELEMENT, ELEMENT.class ELEMENT,
ELEMENT.class.class |
||
|
Element + class(es) type
selectors don't work in Opera 3.x browsers. They work buggy also in all Windows versions. For example the In principle this kind of selectors should be used only in HTML-documents and in XML should be used instead attribute selectors. MS IE doesn't however support in corresponding attribute selectors, but HTML-rules work also in XML (I explain this matter, when I handle attribute selectors). MS IE accepts also illegal names to class selectors. Other notes: Rule names, [attribute].
Other pages: Selectors ([S]). Other sites: CSS2 Selectors Support Chart. |
||
ELEMENT >
ELEMENT, ELEMENT + ELEMENT |
||
|
The first CSS2 level selector
works also in Opera 3.x browsers. I tested |
||
[attribute], [attribute="value"], [attribute~="value"], [attribute|="value"] |
||
|
Attribute selectors work well also in Mozilla Gecko and Opera browsers in attribute lists, which use |
||
|
Information about browsers, which render or print this site best.
Help pages has been last edited 09.09.2003 | |