Not well known CSS techniques

Advertisement
Without CSS style sheets we can't build a modern web today. However, are you familiar with CSS enough to use its maximum possibility? Or just copy a few rows of styles from your first successful website? There are some tips that may help you or may be interesting for you.

Child selection

Well, this is well known I think, but for those, who forget on it often...

<style type="text/css">
#content p a { color: #FF0000; }
</style>
<div id="content">
 <p>
 <a href="http://www.maxiorel.com">Maxiorel</a>
 </p>
</div>

<div id="content2">
 <p>
 <a href="http://www.backuphowto.info">Backup HowTo</a>
 </p>
</div>

Step by step selection

The trick is not very practical, because the large number of consecutive elements (such as lines of the table), requires a very long definition of the CSS:

<style type="text/css">
tr{background-color: #39f;}
tr+tr{background-color: #fff;}
tr+tr+tr{background-color: #39f;}
</style>
<table cellpadding="5">
    <tr>
        <td>jedna</td>
        <td>dvě</td>
    </tr>
    <tr>
        <td>tři</td>
        <td>čtyři</td>
    </tr>
    <tr>
        <td>pět</td>
        <td>šest</td>
    </tr>
</table>

By attributes selection

Interesting choice depending on whether is defined any property or whether the value of properties is equivalent to a specific value.

a[title] { cursor:help; color:#FF0000; text-decoration:none;}
<a href="http://www.maxiorel.cz/">Maxiorel</a>
<br />
<a href="http://www.rejpal.cz/" title="Nice forum">Rejpal</a>

a[id="forum"] { color:#0000FF; text-decoration:none;}
<a href="http://www.rejpal.cz/" id="forum">Rejpal</a>

To apply only to the style element which value of any attribute contains a given text, follow these steps:

a[title~="The best"] { color:#33CC33;}
<a href="http://www.maxiorel.com/" title="The best website">Maxiorel</a>
<a href="http://www.rejpal.cz/" title="The best forum">Rejpal</a>

Content: 
Tags: 
TOPlist