...

View Full Version : CSS addressing



JAVAEOC
02-04-2004, 02:29 PM
what would this adress?

DIV#links A SPAN

thanks

liorean
02-04-2004, 02:32 PM
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
02-04-2004, 11:12 PM
but why isnt it

div #Link A SPAN?

or

div#Link:A:SPAN?

I know the : is used fore something but what?

liorean
02-04-2004, 11:42 PM
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
02-04-2004, 11:56 PM
why has the DIV#Link no space?

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

thanks so far

JAVAEOC
02-04-2004, 11:59 PM
ha i like the german part of the selectoracle even tho it has alot of mistakes in it it sill helps me :)

liorean
02-05-2004, 12:24 AM
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
02-05-2004, 03:55 AM
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
02-05-2004, 04:10 AM
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
02-05-2004, 04:19 AM
thanks for the clarification, liorean, although I'm still a bit confused :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... :thumbsup:

liorean
02-05-2004, 04:29 AM
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
02-05-2004, 04:33 AM
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
02-05-2004, 04:44 AM
ahh... I see, thanks for clearing that up Liorean :thumbsup:

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

-Rich

liorean
02-05-2004, 05:05 AM
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
02-05-2004, 10:51 AM
Holy cow!
Another fantastic theory lesson from professor liorean.
This thread cleared up a few inconsistencies for me.
Thanks.

JAVAEOC
02-05-2004, 07:48 PM
im still too dumn

- '#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.

so where is teh difference if i would do this

#parent+#secondChild+elm

basically i still dont get '+' at all and i dont get the difference between ' ' and '>'

lol

thanks for you patients

mindlessLemming
02-06-2004, 12:38 AM
Ok, I'm going to give this a quick shot.
But first, I'm going to take the explanation out of the context of code.
So here goes.
There is a pregnant woman standing next to another woman at a bus stop.
If you were refering to the woman, lets say you would use


woman {....}
using

woman+woman{....}
would selct the woman standing next to her. '+' means 'adjacent to' or
'next in line'....

if you were to use

woman child{....}
you would select the baby inside the woman, as ' ' refers to 'contained within' or more correctly, 'child of'.
Also,if you were to use

woman>child{....} you would also select the baby, as (for the purposes of this very simple example) '>' performs much the same function as ' '.

Using something like


woman>woman{....} Would not work, as the woman is not inside the other woman, she is next to her. The same goes for ' '.

My example is very lacking, and has a few flaws, but that's as simplified as I can make it.
Hope it helped.

Andrew

ronaldb66
02-06-2004, 12:55 PM
Not to diminish Liorean's efforts in any way, but the Selectutorial (http://css.maxdesign.com.au/selectutorial/index.htm) does a pretty good job of explaining CSS selectors as well, and it has pretty pictures for those who have trouble with the various terms, although, as they tell you as well: "It's a family thing"!

liorean
02-06-2004, 01:02 PM
Heh, Russ made a quite good job with that tutorial. And well, the family thing is a good representation of a hierarchical system.

JAVAEOC
02-06-2004, 11:11 PM
thanks mindless, finally got the difference:

<body>
<ul>
<li>ha</li
</ul>
<span>buh</span>
</body>

ul+span would adress the buh psan right?

but body+span would not adress it cause its does not follow up right?

ul li would select "ha"

right?

please correct me if i am wrong

thanks very much.

mindlessLemming
02-07-2004, 12:42 AM
w00t! :thumbsup:
(That's nerd for yes ;))

JAVAEOC
02-08-2004, 05:28 AM
Truble with that adressing stuff again :(

.udm>li+span{
position: absolute;
top: 170px;
left: 0px;
text-align: center;
width: 7.5em;
color: #C4C4C4;
visibility: hidden;
}


that above works just fine and it adress the span which is directly after the li which is in the class udm

which is perfectly as i want it, but the next exambple does nto work

it should adress any span which is directly after the li which is being hovered and is inside the class name udm

.udm>li:hover+span{
position: absolute;
top: 170px;
left: 0px;
text-align: center;
width: 7.5em;
color: #C4C4C4;
visibility: visible;
}

whats wrong with it?

ez4me2c3d
02-08-2004, 05:55 AM
correct me if i am wrong but i don't believe you can use the pseudo class :hover in the middle of your selectors.

use the :hover on your span instead.

brothercake
02-08-2004, 10:03 AM
Originally posted by ez4me2c3d
correct me if i am wrong
You are wrong - pseudo-classes can go on any element inside a selector - and moving it in this case would change the meaning of the selector.

mindlessLemming
02-08-2004, 12:14 PM
Originally posted by JAVAEOC

whats wrong with it?

My guess is that there is currently little to no browser support for such a complex selector.:(

me'
02-08-2004, 03:29 PM
See this post (http://annevankesteren.nl/archives/2004/01/hover-and).

ez4me2c3d
02-08-2004, 04:52 PM
Originally posted by brothercake
You are wrong - pseudo-classes can go on any element inside a selector - and moving it in this case would change the meaning of the selector.

figures as much, thanks.

liorean
02-08-2004, 05:11 PM
JAVAEOC: I doubt you are using it right. Do you really want to style a span element that comes directly after an li in the source? That means it matches something like this:
<* class="udm">
....
<li></li>
<span></span>
...
</*>Is that what you want? Don't you actually want to match the span if it is INSIDE the li instead of if it is a sibling?

JAVAEOC
02-08-2004, 05:28 PM
<ul id="udm" class="udm">
<li><a href="">Home</a>
<ul>
<li><a href="">About</a></li><span>NFO text</span>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</li>

<li><a href="">About</a></li>
<li><a href="">More</a></li>
<li><a href="">Stuff</a></li>
<li><a href="">#C4C4C4</a></li>
<li><a href="">#00A000</a></li>
</ul>

tried to modify brocakes menu (doesnt work tho)

liorean
02-08-2004, 06:24 PM
Ok, your error:
That matches the selector '.udm li+span', but not the selector '.udm>li+span'. The '>' is the child selector. That means the li element has to be a child of the .udm element for the selector to match. It does not match if the span is a child of a child, or anything else.


As a sidenote, you should note that the list as you write it is invalid. The span must be inside an li element if you want it to validate.

JAVAEOC
02-09-2004, 12:23 AM
new code

.udm li+span{
position: absolute;
border: 10px solid #3B3B3B;
left: 300px;
width: 100px;
}

.udm li:hover+span{
border: 20px solid #3B3B3B;
}

<ul id="udm" class="udm">
<li><a href="">Home</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</li><span>Test span</span>

<li><a href="">About</a></li>
<li><a href="">More</a></li>
<li><a href="">Stuff</a></li>
<li><a href="">#C4C4C4</a></li>
<li><a href="">#00A000</a></li>
</ul>

Ok the ".udm li+span" works just fine but now i want to chage the border when the li is being hover so i die this: ".udm li:hover+span"

doesnt work tho

whats wrong?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum