How to write CSS selectors

Posted by

How to write CSS selectors

This really depends on the whole markup which would suggest splittong up the page up into several sections and sub sections and assigning ID’s to them. Example on this page, there are sections which would use:

#htmlgoodies-com – On the body element for user style sheets.

#header

#logo

#search

#content

#breadcrumbs

#content-ads

#sidebar

#navigation

#sidebar-ads

#earthweblinks

#footer

This is one of the common technique which allows for easy referencing and quick for each of sections with Css.

When Css for all these sections is written which is best to use complete selectors for section which is being referenced except for body ID,

Example:

#sidebar #navigation ul li a{

property:value;

}

As opposed to this:

#navigation a{

property:value;

}

This methods is said to have same effect when code is written in a best way at later date for the markup change. Example that another element is added to #navigation section, outside of the list and needs different rules which is applied to it, old code which is said to beed to be modified which is to be overridden with new rules.

Rules for each of the sections together, perhaps even writing a little comment at the beginning of the group to make it easy to spot when scrolling through code. Also, keep the selectors in the same order as the markup they reference, in other words, for this markup:

<div id=”example”>

<h2>Heading</h2>

<p>Lorem.</p>

<ul>

<li>…</li>

</ul>

<p>Ipsum.</p>

</div>
The CSS selectors would be in this order:

#example

#example h2

#example p

#example ul

#example ul li

Leave a Reply

Your email address will not be published. Required fields are marked *