Kompx.com or Compmiscellanea.com

CSS. Target Opera only

Windows : Opera 9.5+ [ 1 ] [ 2 ].

Linux : Opera 9.5+ [ 3 ].

CSS targeting Opera web browser only:

This text is red in Opera

HTML / XHTML. Code:

<p>This text is red in Opera</p>

CSS. Code:

doesnotexist:-o-prefocus, p {color: #f00;}

The -o-prefocus pseudo-class allows styling elements for Opera browser only. The code is placed in the common CSS file, not in a separate one as it is in case of Internet Explorer conditional comments.

Source: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/


[ 1 ]

Opera 3.5 - 5.0 ignores "doesnotexist:-o-prefocus" and reads code as p {color: #f00;}. Opera 6.0 - 9.4 ignores the whole code starting "doesnotexist".

[ 2 ]

Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+, Mozilla 1.5+ ignore the whole code starting "doesnotexist".

Older browsers like Internet Explorer before 5.5 or Netscape before 7.2 or Mozilla before 1.5 seem to ignore the uncommon, Opera 9.5+ specific code ("doesnotexist:-o-prefocus") and apply styles to what they understand - here it is the p tag; making the text in it red.

[ 3 ]

The text is red in Dillo 3.0.1 as well.


Aliosque subditos et thema

 

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.

CSS for a range of elements

 

Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.