1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Does child 'see' classes of all its parents?

Discussion in 'CSS' started by boba5555, Jul 30, 2008.

0
  1. #1
    Dear,

    when I try this
    .cl1 *.cl2 {
	color : blue;
}
    Code (markup):
    as a part of CSS and
    	<i class="cl1"> 
		word1
		<i class="cl2"> 
			word2
			<p class="cl3"> word3
				<i> word4</i> 
			</p> 
		</i> 
	</i>
    Code (markup):
    I get 'word2', 'word3' and 'word4' colored in blue, but if I replace HTML part with
    	<p class="cl1"> 
		word1
		<p class="cl2"> 
			word2
			<p class="cl3"> word3
				<i> word4</i> 
			</p> 
		</p> 
	</p>
    Code (markup):
    I don't get any word colored. I thought that <i>word4</i> see classes "cl1", "cl2" and "cl3" no matter which tags contain it. I am using FireFox 3.0.1. Is there some specification that explains this, something that explicitly says which tags are visible as parents, but which not? Thank you in advance.
     
    boba5555, Jul 30, 2008 IP
  2. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Is there something you specifically want to achieve?

    First, I think it's better to learn html first. Using <i> doesn't have any semantic meaning therefore, it's better to go with <em>. Next, you cannot nest <p> with another <p>. <P> is a block element and can only contain inline elements such as span.
     
    glorie, Jul 30, 2008 IP
  3. boba5555

    boba5555 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Is there something you specifically want to achieve?

    Yes. I want to write CSS parser, but I have to know when I see parent's class attribut, but when not. You wrote that <i> doesn't see class of the first <p> because <p>s can not be nested - thank you for that information. Can you give me some link where I can find more such information? I need that kind of answers. The point is, if you write something using HTML and CSS what browser will show. I don't care is that correct. Using just opened tag <b> with text will not cause browser to ignore it. Browser will bold anyway.

    Thank you for the answer.
     
    boba5555, Jul 30, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Confusing a browser isn't the way to get the desired result. All your parsing tests WILL BE with valid code. Otherwise you're just wasting your time and everyone elses, because one can never predict what a browser will do with incorrect code (except that we know instead of giving up like it should, a browser WILL try to do SOMETHING with it... a pity).

    As far as who can be who's child, the spec is correct but the easy page is
    http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/ which is XHTML but mostly follows HTML.

    For visual formatting, http://www.w3.org/TR/REC-CSS2/visuren.html might help.

    You need to learn the rules for the Cascade, because that's what you're really affecting.
    Learn that ID's count more than classes who count more than unnammed elements. KNow that, when all things are the same, then the order in which they are typed in the CSS sheet affects the cascade (later things override).

    You'll find this page http://www.sitepoint.com/print/get-specific-css-styles most invaluable. Paul is a true guru. Just skip past the ad at the top, the link is not about that book. The actual article is underneath.
    Understand that an inline style means you may or may not have a CSS sheet, or <style> tags in the <head>, but if there's this:
    <div style="float: left; background-color: #000;"> stuff </div>
    then it always overrides whatever is in the external or internal stylesheets. This is why it's checked first before anything else. Beyond that, forget column "a".
     
    Stomme poes, Jul 31, 2008 IP
  5. boba5555

    boba5555 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you very much. This is very helpful.
     
    boba5555, Jul 31, 2008 IP
  6. boba5555

    boba5555 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Do you maybe know what FF will do in this situation
    <p>
    <p>
    </p>
    </p>

    when makes tree?

    So, if there is something like
    <p>
    <i>
    </i>
    </p>

    the tree will be
    root --> p --> i

    but in the first case the tree will be
    root
    / \
    p p
    or something other (maybe root --> p --> p)?

    Thank you in advance.
     
    boba5555, Aug 12, 2008 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You're generally correct, however block elements CAN be nested within each other. A <p> can be nested within a <div>. A <ul> can be nested within a <uL> and actually, I think you probably could nest a <p> within a <p> but I don't know why anyone would ever want to do that so I've never tried that.
     
    Arnold9000, Aug 12, 2008 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It will be root--> p --> p

    replace
    <p>
    <p>
    </p>
    </p>

    with
    <div>
    <p>
    </p>
    <div>
     
    Arnold9000, Aug 12, 2008 IP
  9. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You are correct. Bold works just fine. The problem is that it's not a semantic tag, meaning that if a screen reader was reading the website for a blind person and saying the code to the blind person, then using the <strong> tag is more meaningful to a blind person listening to a screen reader than a <b> tag. Same thing with <em> instead of <i> because em stands for "emphasis" which is what italic words were always designed to mean to the reader throughout the history of the written word. Therefore, the problem with <b> and <i> is that soon these tags will be kicked out and no longer recognized by browsers. So if you use <strong> and <em> you'll be certain to be correct and be within the latest and true standards..
     
    Arnold9000, Aug 12, 2008 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    Not quite true. The <b> and <i> elements are not deprecated, and do have semantic value not related to emphasis. Both are used by typographic convention to indicate such things as ship names, journal and book titles, article titles, foreign phrases, &c.. Used for those purposes, they have implied semantic values. Discussions in the W3 HTML5WG have reinforced the value of these elements.

    That said, using them to provide emphasis is wrong, and <em> or <strong> should be used as appropriate.

    cheers,

    gary
     
    kk5st, Aug 12, 2008 IP
  11. boba5555

    boba5555 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    But then why 
    
<p class="st1">
  <p class="st2">
  </p>
</p>
......
*.st1.st2 {
  background: red;
}
    Code (markup):
    is not recognized by browser? Why if browser makes tree as it was written doesn't take styles in that order? I don't want to say that you it's not true, I just want to say that it doesn't make any sense to me. Is there some public specification for FF?
     
    boba5555, Aug 13, 2008 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    Two points:
    1. The p element may not have a p child. It may only have those elements defined as %inline as child elements.
    2. The closing tag on p is optional.
    See http://www.w3.org/TR/html4/struct/text.html#edef-P

    The DOM would therefore have automagically closed the first p before opening the second. They must, therefore, be siblings. The final closing tag is now an error, having no matching opening tag. The correct parsed result would be more like this: 
    <p>...[color=red]</p>  <<< inserted[/color]
<p>...</p>
</p> [color=red]<<< this is unmatched[/color]
    Code (markup):
    cheers,

    gary
     
    kk5st, Aug 13, 2008 IP
  13. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Then they are merely changing their mind, once again. In html 4 it was recommended not to use these.
     
    Arnold9000, Aug 13, 2008 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Not so much changed their mind, as argued vehemently whether i and b should be deprecated. The result was a recognition of their implied semantic values.

    Where emphasis is meant, then em and strong should be used. When typographic convention is in play, then the i and b have meaning.

    cheers,

    gary
     
    kk5st, Aug 13, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    ah here's another issue:
    If you wanted the second P to be red, you did it wrong. There needs to be a space between the listed elements. so
    .firstclassname .secondclassname
    not .firstclassname.secondclassname

    Otherwise you are referring to a (nonexistant) element with both those classes. The space is actually a css selector referring to a parent-child relationship.
     
    Stomme poes, Aug 17, 2008 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    Wow, italics (inline level) wrapping a paragraph tag (block level) - /FAIL/

    Paragraphs wrapping paragraphs? Wow, /FAIL/. (If it's another paragraph, close the one you are in to START the next one)

    Invalid HTML is not going to work predictably. NOT even certain what you are trying to accomplish, but I'm fairly certain it's NOT going to work nesting things that shouldn't be nested in the first place... WHICH BTW would show up if you tried to VALIDATE said markup - even in transitional that's not valid HTML, it's gibberish.

    Opening the paragraph inside the paragraph will make the first paragraph auto-close. Therin this:

    <p class="st1">
    <p class="st2">
    </p>
    </p>

    Is seen by the browser as:

    <p class="st1">
    </p>
    <p class="st2">
    </p>
    </p>

    Do we see the problem here?
     
    deathshadow, Aug 17, 2008 IP