Subject of the selector

Dear,

I am not sure about some explanations in documentation, so I am asking you for help.

Sentences
"Declarations apply if the associated selector matches the element in question."
and
"Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the rightmost simple selector."
are bit not totally defined for me, actually, I don't understand them at all. Suppose that I am have this simple HTML code

<b>
  <i>
    <u>
    </u>
  </i>
</b>

Code (markup):

and style

b i {display:block}

Code (markup):

.

Does u tag of the example matches the selector? Is u tag a subject of the selector? i is matching i and b is matching b and i is descendant of b, but I can't find is anywhere says that the rightmost simple selector must match the rightmost tag of the path. It just says that there must be something that match the rightmost simple selector, but not necessarily with the rightmost element. Where I am making mistake ?

Thanks.

 

b i {} matches any <i> that is descended from a <b>. It makes no mention of <u>. <u> will be whatever it does by default or whatever it inherits naturally from <b> and <i>.

You'll need to work through some tutorials and read and reread the specs until you grok the meaning. Have you simply made a test page and tried different styles on the content?

cheers,

gary

 

Yes, I have made and it is working exactly in a way I have expected and you wrote, but I just would like to see that in the most formal way. Not all browser are doing same, so not all browser are doing all things by specification. In the path/subset of elements
<b> <ol> <li> <i> </i> </li> </ol> </b> and in selector "b i" there is no any mention about ol, but just given path (the whole path) will be matched. So, I understand and my experience show that the rightmost element of path and the rightmost simple selector of selector must match, but I can't find it in specification.

 

Yes, the last-mentioned selector is who gets the style.

Engrish: if the thing exists the way you wrote it in the CSS, it'll work.

If you have
<p>
<b>
textitty text text text</b>
</p>

and you say
p i {
stuff;
}
there is no i at all, let alone an i who is a child/descendant of p. If it does not exist, it doesn't get styled. If it exists but you described it the wrong way, it does not get styled.

Engrish: if you say a selector, that's all of that selector, but if you do childofa-childofa-childofa-child then all of those need to exist and match. This is what Gary says when he said the <u> who is not mentioned has nothing to do with the style declaration.

If you have that HTML and say
b i {
styles;
}
that means nothing more than "any i who is a descendant of b". Doesn't matter how many generations of selectors are in between, anyone who is nested, no matter how deeply, is still a descendant of that element. You're still a descendant of your great great great great grandparents, no matter how many parent, grandparents, great-grandparents there are between you guys.

If that particular situation above doesn't work right in all browsers, it's because an inline such as b simply isn't man enough to hold a big block like an ol. It's illegal. Which means the browser gets to do... whatever it thinks is best. A guess on its part.

But if you had

<dl>
  <dt>FOo manchoo</dt>
  <dd><p>Mucha mucha lalapalooza</p>
    <ol>
      <li>Item1</li>
      <li>Item2>/li>
      <li>
        <dl>
          <dt>F00dz</dt>
           <dd>tasty</dd>
         </dl>
      </li>
    </ol>
  </dd>
</dl>

Code (markup):

You could say

dl li {
styles;
}
instead of
dl dd ol li {
styles;
}
which is also correct, but more specific.

You could also say
dl p {
styles;
}
instead of
dl dd p {
styles;
}
which is also correct, but more specific.

Again, it doesn't matter who's in between. The only importance of the path is that it's in the correct order. You couldn't have

p dl {
styles;
}

or

dl ol p {
styles;
}

because the machine looks in order of what you list. There are no p's inside the ol, and no dl's inside the p.

So, this isn't exactly the same as a filename path in a computer, where you must list every step in the path. CSS selectors know how to find stuff, and you only need to list the minimum required information.