Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31

Thread: CSS addressing

  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS adressing

    what would this adress?

    DIV#links A SPAN

    thanks

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but why isnt it

    div #Link A SPAN?

    or

    div#Link:A:SPAN?

    I know the : is used fore something but what?

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    Last edited by liorean; 02-05-2004 at 10:18 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why has the DIV#Link no space?

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

    thanks so far
    Last edited by JAVAEOC; 02-04-2004 at 11:02 PM.

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ha i like the german part of the selectoracle even tho it has alot of mistakes in it it sill helps me

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.)
    Last edited by liorean; 02-05-2004 at 03:35 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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...

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, you might use the specificity for some things. Let me give you some examples:
    Code:
    <div id='container'>
        <div id='content'>
        </div>
    </div>
    Code:
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    Regular Coder
    Join Date
    Oct 2003
    Location
    SC
    Posts
    936
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Ok, let's define some XML to relate to:
    Code:
    <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.
    Last edited by liorean; 02-05-2004 at 10:25 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #15
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Holy cow!
    Another fantastic theory lesson from professor liorean.
    This thread cleared up a few inconsistencies for me.
    Thanks.

    I take no responsibility for the above nonsense.


    Left Justified


  •  
    Page 1 of 3 123 LastLast

    LinkBacks (?)

    1. 09-15-2014, 08:40 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •