Question on CSS id/class, Having a hard time understanding it... Options

[J_Starner]

Ok so I'm reading up on CSS now, and boy am I having a hard time. I'm at the point to where I wanna see forget the whole CSS thing, and use just html and tables for layout, it may not be the standard but at least they aren't like understanding Japanese! Anyhow, my question is this, I'm reading up on all the different CSS, and after reading about classes and contextual selectors and everything a thought came to mind. I understand that you can use contextual selectors to, say, change the color of an emphasized word in just a header alone. Now, this question sprang to mind, what if you have a single word somewhere in the middle of a paragraph that has no <em> tags or any tag whatsoever around it, but you want to change that particular word to, say, the color green? There is no tag to single it out or anything, just a word in the middle of a paragraph that you want to color green, how do you do this?

One more question, is there really any difference between using an id and a contextual selector? It seems to me they pretty much work the exact same way, or am I missing the point?

Boy I'm in for a long ride!

[Darin McGrew]

Now, this question sprang to mind, what if you have a single word somewhere in the middle of a paragraph that has no <em> tags or any tag whatsoever around it, but you want to change that particular word to, say, the color green? There is no tag to single it out or anything, just a word in the middle of a paragraph that you want to color green, how do you do this?

Unless there is some other selector you can use (and since it's in the middle of a paragraph, selectors like :first-word won't work), you can't. There has to be some structure to hang the CSS on, even if it's otherwise meaningless structure like <span>...</span>.

One more question, is there really any difference between using an id and a contextual selector? It seems to me they pretty much work the exact same way, or am I missing the point?

What do you want the structure in the HTML to be?

For example, let's say you have a document with a title (Lorem Ipsum) and a subtitle (Dolor Sit Amet). There are various ways you could structure the markup:

<h1>Lorem Ipsum: Dolor Sit Amet</h1>
<h1>Lorem Ipsum</h1><h2>Dolor Sit Amet</h2>
<h1>Lorem Ipsum<br><small>Dolor Sit Amet</small></h1>
<h1>Lorem Ipsum<br><span class="subtitle">Dolor Sit Amet</span></h1>
<h1>Lorem Ipsum<br><span id="h1subtitle">Dolor Sit Amet</span></h1>

Different authors will use different markup. Pages with different markup will need different selectors in their style sheets.

[pandy]

An id selector also has the highest possible specificity. All selectors work the same in the respect that they match some HTML structure. Partly it's a matter of taste. This is my personal taste, but I seldom give something "small", like for instance a link, an id, even if the styling of it is unique. I reserve it for a few sections, like#nav, #content and so on. With a little luck I can get to almost everything else by using those IDs in complex selectors like contextual selectors and don't have to use so many other IDs or classes.

[Christian J]

what if you have a single word somewhere in the middle of a paragraph that has no <em> tags or any tag whatsoever around it, but you want to change that particular word to, say, the color green? There is no tag to single it out or anything, just a word in the middle of a paragraph that you want to color green, how do you do this?

That's not possible with CSS. Also, if the word deserves a special style, shouldn't it be marked up with HTML to begin with (e.g., if you want the word to be emphasized you might use the EM element).

One more question, is there really any difference between using an id and a contextual selector? It seems to me they pretty much work the exact same way, or am I missing the point?

Other uses for ID include using it as an anchor:

CODE

<a href="#foo">Go to Foo</a>
...
<p id="foo">Foo</p>

It can also be used in javascript with the "getElementById()" method.

[Brian Chandler]

Ok so I'm reading up on CSS now, and boy am I having a hard time. I'm at the point to where I wanna see forget the whole CSS thing, and use just html and tables for layout, it may not be the standard but at least they aren't like understanding Japanese!

Just learn Japanese. It's generally more useful than CSS, and a lot less painful.