Forum Moderators: not2easy
What is better and faster (to process):
#qq {...} OR div#qq {...}?
div.zz {...} OR .zz {...}?
I dunno about faster, but which is better or most appropriate depends on what you're doing with the css. Css is a way of styling markup contextually - this isn't usually noticed since the context most often implied is 'everywhere'.
For example, the following class:
.style { }
...will affect every element it is applied to in about the same way (depending on whether or not the properties of .style are appropriate to the element that the class is applied to).
But, it is quite possible that a class may need to have different properties depending on what element it is applied to. In this type of situation, your css might look like this:
.style { /* Properties common to ALL .style elements */ }
div.style { /* .style properties specific to <div> elements */ }
p.style { /* .style properties specific to <p> elements */ }
ul.style { /* .style properties specific to <ul> elements */ }
... and your html might look this way:
<p class="style">Lorem ipsum</p>
<ul class="style">
<li>dolor</li>
<li>sit</li>
</ul>
<div class="style">
Amet consectetuer
</div>
On the other hand, if your set of elements will occur together (as shown in the markup above) and needs to be styled in a particular way, you might choose a method like this instead:
/* CSS: */
body.style { /* Properties common to ALL elements inside a <body> element with the class 'style' */ }
body.style div { /* Styles for ALL <div> elements inside <body class="style"> */ }
body.style p { /* Styles for ALL <p> elements inside <body class="style"> */ }
body.style ul { /* Styles for ALL <ul> elements inside <body class="style"> */ }
But, this might still be too general a solution for a given situation; maybe only select groups of elements in a page will need to be styled this way. In this case you might choose to structure your css this way:
div.style { /* Styles common to ALL elements inside <div class="style"> */ }
div.style p { /* Styles common to ALL <p> elements inside <div class="style"> */ }
div.style ul { /* Styles common to ALL <ul> elements inside <div class="style"> */ }
div.style div { /* Styles common to ALL <div> elements inside <div class="style"> */ }
...and your html might look like this:
<div class="style">
<p>Lorem ipsum</p>
<div>dolor</div>
<ul>
<li>sit</li>
</ul>
</div>
...
...
<div class="style">
<p>Amet</p>
<div>Consectetuer</div>
</div>
Of course, it could be too that your group of elements will occur only once on any given page - in a footer or column on every page, for example. In such cases, you'd use somthing similar to this instead:
div#style { /* Styles common to ALL elements inside <div id="style"> */ }
div#style p { /* Styles common to ALL <p> elements inside <div id="style"> */ }
div#style ul { /* Styles common to ALL <ul> elements inside <div id="style"> */ }
div#style div { /* Styles common to ALL <div> elements inside <div id="style"> */ }
...with html more like this:
<div id="style">
<p>Lorem ipsum</p>
<div>dolor</div>
<ul>
<li>sit</li>
</ul>
</div>
You can see in all of the above examples that what differs is the degree of specificity of the context in which the markup to be styled occurs. The same set of principles can be used to target extremely specific bits of markup as in the following (wholly spurious and silly) example:
HTML:
------
<body>
<table>
<tr>
<td>
<div>
<ul>
<li>
<div>
<p>Lorem ipsum dolor sit <span>amet</span> consectetuer</p>
</div>
</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
CSS:
-----
body table tr td div ul li div p span {color:#f90;font-weight:bold;}
...where the word 'amet' will show bold and orange :)
-B
Markup in this post not necessarily endorsed by the author... ;-p
But is there any difference in speed of identification by browser and cross-browser compatibility issue for these variants (if it's applied, for example only to a 'div' element)?
