[benbacardi]

I have learnt many new things today!

I was browsing the Selectutorial, when I came across the Child selector. I always use:

div p { color: blue; }

to target any p within a div, but the selectutorial uses:

div > p { color: blue; }

Is there a difference?

Also, I learnt about a way of selecting elements that I've never heard of: the adjacent selector:

h2 + h3 { color: blue; }

This would target any h3 that follows an h2 in the code. I can't really see any advantage to this... but I found it interesting nevertheless!

Later on...

Wow!!! Reading further, I came across the attribute selector! For example, you could select an image where the src is "small.gif" by using the following css:

img[src="small.gif"] { border: 1px solid #000000 }

It also uses the example: if you want to select any img with an "alt" tag regardless of what it is:

img[alt] { border: 1px solid #000000 }

This time I'm going to quote: The example below will select any image whose attribute (in this case "alt") contains a space separated list of words - in this case any "alt" that includes the word "small".

img[alt~="small"] { border: 1px solid #000000 }

Again, a quote: The example below will select any image whose attribute (in this case "title") has a hyphen separated list - in this case any title that includes "small-".

img[title|="small"] { border: 1px solid #000000 }

Apparently the attribute selector is not supported by any current versions of IE, sadly.

[Catalyst]

I think using:

p > div

applies to only children of p that are div, where as

p div

applies to children and grandchildren. So they would be different for something like

<p>
<div>
<div> this one would differ</div>
</div>
</p>

[marcamos]

That is all great information Ben, thanks for finding it and posting it! Once IE7 becomes "the norm", I know I'll be using more of these to my advantage.

[benbacardi]

Catalyst, on Oct 7 2006, 12:57 AM, said:

I think using:

p > div

applies to only children of p that are div, where as

p div

applies to children and grandchildren. So they would be different for something like

<p>
<div>
<div> this one would differ</div>
</div>
</p>

aha! That might explain it... might have to do a little experimenting of my own.

[moojoo]

I want my <q> tag! Damn you IE 6, 5, 4, 3

[James Mitchell]

That is some pretty cool information, thanks for sharing.

I'm with Marc - once its more standard I'll use more things like it.
I'm also with moojoo - I want the <q> tag to become a standard with no hacks.

[benbacardi]

I found a use for the attribute selector! Just thought you guys might like to know...

My friend Dan has a Wordpress blog, and he wanted some way of changing the links in the "blogroll" depending on what they were... thing is, you can't add a class attribute to the links, but you can add a "title"...

So in comes the role of the attribute selector! Now, whenever he adds a link, all he has to do is specify a unique title, then add a line of css in the stylesheet to target that link! And it works a dream in all modern browsers... Problem solved.

I also tried to find a use for the adjacent selector earlier but it just didn't look right once it was done.

Just thought you guys might be interested.

[marcamos]

That's a great idea! For other's information, writing an attribute selector in CSS goes like this:

Change all anchors with a title element:

a[title] {color: green;}

Or, to specify any element with a title attribute containing a specific value, you simply change it to this:

a[title="Go to green page"] {color: green;}

The above difference is: only anchors with a title containing that specific text, "Go to green page", will be turned green.

[benbacardi]

Yeah, thanks Herk, I was going to put that but I thought it's already in the first post

[marcamos]

benbacardi, on Nov 15 2006, 11:29 AM, said:

Yeah, thanks Herk, I was going to put that but I thought it's already in the first post

Oooooh yeah. Ha! It would be wise of me to actually read...

Oh well, now it's really easy to find the information!

[william]

Very good info here... Need to start thinking out of the box with regards to CSS when I'm designing I think.

On a different note, I was having some div problems yesterday (started to lose track of what tag was closing what) which made me wonder if you could assign a div closing tag with a id?

<div id="main"> Some text </div id=main>

Googled for information and I find this which basically says it cannot be validated and is essentially useless.

Do you think this feature would be useful, and if so, would it ever become valid?

[benbacardi]

They best way to get around losing track of what tag is closing which is to indent your code, it makes it really easy

[Karl Buckland]

Yeah, good indentation in HTML, as well as programming, makes life much, much easier!

If you have a really, really, big HTML file and lots of divs inside divs, then you can try putting comments by the closing tags:

<div id="main">
	  <div id="top">
			<div id="inner">
				  <div id="content"> blah blah</div>
			</div>
< ... lots of stuff goes in here... >
	  </div> <!-- top div -->
</div> <!-- main div -->

[marcamos]

wgardner, on Nov 16 2006, 05:53 AM, said:

Very good info here... Need to start thinking out of the box with regards to CSS when I'm designing I think.

On a different note, I was having some div problems yesterday (started to lose track of what tag was closing what) which made me wonder if you could assign a div closing tag with a id?

<div id="main"> Some text </div id=main>

Googled for information and I find this which basically says it cannot be validated and is essentially useless.

Do you think this feature would be useful, and if so, would it ever become valid?

I'm not sure why the closing tag would need an id? What was your thought on using it?

[william]

herkalees, on Nov 16 2006, 01:59 PM, said:

I'm not sure why the closing tag would need an id? What was your thought on using it?

Well I was getting very confused at where my container was being closed, and I thought the solve would be to just assign the closing container div with an id.

This way, my container would definitely be getting closed at the right point within the html.

Maybe I am missing something, or just need to revise some basic Css/html rules

[marcamos]

Oooo, I see. As Benbacardi mentioned, indentation (and healthy white-space) is the best and easiest way. Such as:

<body>
	<div id="one">
		
		<div id="two">
			Stuff
		</div>

		<div id="three">
			More stuff
		</div>

	</div>

	<div id="four">
		Even more...
	</div>
</body>

[TJSingleton]

Here is a support chart comparing the engines: http://www.richinsty...bugs/table.html

Sirkent, on Nov 16 2006, 09:58 AM, said:

Yeah, good indentation in HTML, as well as programming, makes life much, much easier!

If you have a really, really, big HTML file and lots of divs inside divs, then you can try putting comments by the closing tags:

<div id="main">
	  <div id="top">
			<div id="inner">
				  <div id="content"> blah blah</div>
			</div>
< ... lots of stuff goes in here... >
	  </div> <!-- top div -->
</div> <!-- main div -->

Very true -- I can't remember where I first saw this, but I was surprised how much it helps.

[moojoo]

I always comment my divs openings and closings for easy navigation later on something like:

<!-- begin foo div which does foo for these elements (foo1, foo2) (#foo) -->

<!-- close foo div (#foo) -->

This way it tells you what the div does and its css name. So ha! Easy source reading/editing. This example would be for something like a clearing div etc which say cleared below two floated elements such as foo1 and foo2. And of course this just helps especially if others have to work on your source.

Real world example would be:

<!-- line break to clear the floated elements (#blah, #halb) and add horizontal rule -->
<div class="horizontal_line_top">&nbsp;</div>
<!-- end line break -->

This post has been edited by moojoo: 30 November 2006 - 12:29 PM

[James Mitchell]

Very nice looking, however on larger pages, is all that necessary? Doesn't it clutter up the markup?

I don't see where it would make much of a difference other than in the source, but I thought I'd ask.

[marcamos]

moojoo's way is certainly helpful and thorough, but I'm afraid I don't have the patience to write all that