CSS addressing

[JAVAEOC]

what would this adress?

DIV#links A SPAN

thanks

[liorean]

It addresses any SPAN element that is a decendant of an A element, that is a child of a DIV element with the ID "links".

See SelectORacle at <http://gallery.theopalgroup.com/selectoracle/>. It does a marvellous job of explaining selectors.

[JAVAEOC]

but why isnt it

div #Link A SPAN?

or

div#Link:A:SPAN?

I know the : is used fore something but what?

[liorean]

Well, it've because of a nuber of things. I'll try to explain:
(Note that I mean different things when I say simple selector and when I say selector. Don't confuse the two.)

- A css rule is a list of selectors, separated by a comma, followed by a declaration block.
- Each selector describes a single tree of elements that the selector will be matched against.
- The selectors in turn consists of simple selectors separated by combinators. (Note that space is one of the combinators that may separate simple selectors, so you can not use a space within the simple selector (except in a few unusual cases that I won't mention here))
- The CSS2 combinators are ' ', '+' and '>', meaning decendant, next sibling and child, respectively.
- Each simple selector matches a single element in the tree the selector matches.
- The simple selectors consists of an optional element, followed by an optional id, followed by any number of optional classes, followed by any number of optional attribute selectors, followed by any number of optional pseudo classes, followed by an optional pseudo element.
- Elements are represented by their XML or HTML element names or an asterisk '*'.
- Ids are represented by a hash '#' and the id name.
- Classes are represented by a fullstop '.' and the class name.
- Pseudo classes are represented by a colon ':' and the pseudo class name.
- Pseudo elements are represented by a colon ':' in CSS2 and double colons '::' in CSS3, followed by the pseudo element name.

Why don't you try to pass those three selectors you had through the SelectORacle? That way you will find out what they mean.

[JAVAEOC]

why has the DIV#Link no space?

and i dont get the difference between '+' and ' ' and '>'

thanks so far

[JAVAEOC]

ha i like the german part of the selectoracle even tho it has alot of mistakes in it it sill helps me

[liorean]

Originally posted by JAVAEOC
why has the DIV#Link no space?

Because it's a simple selector. It describes a single element, a DIV with an id of Link. If you inserted a space there, it would be two simple selectors and the decendant combinator, so it would match an element with the id of Link that is a decendant of a DIV element.

and i dont get the difference between '+' and ' ' and '>'

As I said, '+' is the next sibling combinator. If you specify 'li+li' for instance, you match a li element that is the next sibling of a li element. It matches only siblings, so they must have a common parent element.

'>' is the child combinator. If you specify 'body>div' you match a div element that is a direct child of a (the) body element, but not any nested divs.

' ' is the decendant combinator. If you specify 'body div' you match a div element that is a decendant of the body element. In other words, you match not only children, but also all nested divs.


Does that clear it up for you?

[rmedek]

here's something I can't find a good answer to... does div#link and #link mean the same thing? After all, it is an id, not a class...

-Rich

[liorean]

No. '#link' means any element with the id "link". 'div#link' means any div element with the id "link". Also, it should be noted that 'div#link' has a specificity of [0,1,0,1] while '#link' has a specificity of [0,1,0,0], so if you use both in the same stylesheet, the 'div#link' will override '#link' for common properties.


(Specificity is a series of values that are compared to determine what value of the declared to use. The first column is property specific and represents the !import keyword. The second represents the number of ids in the selector. The third represents the number of class selectors, attribute selectors, pseudo class selectors or pseudo element selectors in the selector. The fourth is the number of element selectors in the selector. '*' does not count to the specificity. The specificity will be compared for the first value, then the second, then the third, then the fourth. If the specificity is the same, the last rule of that specificity that affects that element will apply.)

[rmedek]

thanks for the clarification, liorean, although I'm still a bit confused ... It (#link) is an id, not a class, so it would only be used in one part of the document, right? So I don't know why the specificity would apply. Although now I can see why "div.link" would be better than ".link"

...it's so nice to read a thread without any flaming for once...

[liorean]

Well, you might use the specificity for some things. Let me give you some examples:

<div id='container'>
    <div id='content'>
    </div>
</div>

div#container > div {
    color: green;
}

#content {
    color: red;
}

In this example, 'div#container > div' has a specificity of [0, 1, 0, 2] while '#content' has a specificity of [0,1,0,0]. Thus, the #content color will be green, not red.


Another thing to think of, is that if you use the id on a span element, but specify 'div#id' in the stylesheet, it will not render.



And, finally, you might use the id for different purposes on different pages, but have the same stylesheet. Then you might want the specificity to kick in and determine what of them should be used.

[JAVAEOC]

sibling, child, ancestor, brother, sister or decendant all mean nothing to me

lol

can you try to put this in none CSS terms like for the relally stupid pple under us (LIKE ME).

lol

thanks for the help so far

has been great

[rmedek]

ahh... I see, thanks for clearing that up Liorean

JAVAEOC, try this link, it really helped me get a handle on the whole thing: http://www.w3schools.com/css/default.asp

-Rich

[liorean]

Ok, let's define some XML to relate to:

<elm id="grandParent">
    <elm id="parent">
        <elm id='firstChild'>
             <elm id="firstGrandChild"/>
             <elm id="secondGrandChild"/>
             <elm id="thirdGrandChild"/>
        </elm>
        <elm id='secondChild'>
             <elm id="fourthGrandChild"/>
        </elm>
        <elm id='thirdChild'>
             <elm id="fifthGrandChild"/>
             <elm id="sixthGrandChild"/>
        </elm>
    </elm>
</elm>

Ok, then we'll see what we can do to explain things.

• The decendant combinator:
  - '#grandParent elm' will match all elm elements contained within the #grandParent element, including nested elements such as the children and grand children.
  
  - '#parent elm' will match all elm elements contained within the #parent element, including the nested elements such as the grand children.
  
  - 'elm elm elm' will match all elm elements contained within an elm element that is contained within an elm element. In other words, all the children and all the grand children.
  
  - '#parent elm elm' will match all elm elements contained within an elm element that is contained within the #parent element. In other words, all the grand children.
  
  - 'elm #parent elm' will match all elm elements contained within the #parent element that is contained within an elm element. In other words, all the children and all the grand children.
  
  - '#parent #secondChild elm' will match all elm elements contained within the #secondChild element that is contained within the #parent element. In other words, just the #fourthGrandChild element.
• The child combinator:
  - 'elm > elm' will match all elm elements directly contained within an elm element. In other words, all elm elements except #grandParent.
  
  - 'elm > elm > elm' will match all elm elements directly contained within an elm element, that is directly contained within an elm element. In other words, all children and grand children.
  
  - 'elm > #parent > elm' will match all elm elements directly contained within the #parent element that is contained within an elm element. In other words, all the children but not the grand children.
• The next sibling selector:
  - 'elm + elm' will match all elm element that are directly preceeded by an elm element that is the child of the same parent. In other words, it will match #secondChild, #thirdChild, #secondGrandChild, #thirdGrandChild and #sixthGrandChild.
  
  - '#firstChild + elm' will match all elm elements that are directly preceeded by the #firstChild element, in other words the #secondChild element.
• And a combination:
  - 'elm > #parent elm + elm +elm' will match all elm elments that are directly preceeded by an elm element that are directly preceeded by an elm element, that is contained within the #parent element, that is a child of any elm element. In other words, it will match #thirdChild and #thirdGrandChild.

[mindlessLemming]

Holy cow!
Another fantastic theory lesson from professor liorean.
This thread cleared up a few inconsistencies for me.
Thanks.