1 2 Previous Next 51 Replies Latest reply on Sep 10, 2008 4:43 AM by Newsgroup_User

    What is the correct CSS terminology for...

    Level 7
      All instances of class "X" that coincide with id="Y".

      (Div is ID="Y", but on some rare occasions, it will *also* be class="C")

      Wouldn't it be something like :

      #Y .X { }


        • 1. Re: What is the correct CSS terminology for...
          Level 7

          "Mike" <mike@nospam.com> wrote in message
          news:ga65uo$cnj$1@forums.macromedia.com...
          > All instances of class "X" that coincide with id="Y".
          >
          > (Div is ID="Y", but on some rare occasions, it will *also* be class="C")
          >
          > Wouldn't it be something like :
          >
          > #Y .X { }

          That selector would mean: "Selects any element with a class attribute that
          contains the word X that is a descendant of any element with an id
          attribute that equals Y."

          I'm thinking something like:

          *#Y.X

          ..but guessing too.


          --
          Patty Ayers | www.WebDevBiz.com
          Free Articles on the Business of Web Development
          Web Design Contract, Estimate Request Form, Estimate Worksheet
          --

          • 2. Re: What is the correct CSS terminology for...
            Level 7

            "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
            news:ga66dk$d97$1@forums.macromedia.com...
            >
            > "Mike" <mike@nospam.com> wrote in message
            > news:ga65uo$cnj$1@forums.macromedia.com...
            >> All instances of class "X" that coincide with id="Y".
            >>
            >> (Div is ID="Y", but on some rare occasions, it will *also* be class="C")
            >>
            >> Wouldn't it be something like :
            >>
            >> #Y .X { }
            >
            > That selector would mean: "Selects any element with a class attribute that
            > contains the word X that is a descendant of any element with an id
            > attribute that equals Y."
            >
            > I'm thinking something like:
            >
            > *#Y.X

            I checked a little further and I believe that's exactly what you want:

            *#Y.X

            --
            Patty Ayers | www.WebDevBiz.com
            Free Articles on the Business of Web Development
            Web Design Contract, Estimate Request Form, Estimate Worksheet
            --

            • 3. Re: What is the correct CSS terminology for...
              Level 7
              No. It would be -

              #Y.X

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "Mike" <mike@nospam.com> wrote in message
              news:ga65uo$cnj$1@forums.macromedia.com...
              > All instances of class "X" that coincide with id="Y".
              >
              > (Div is ID="Y", but on some rare occasions, it will *also* be class="C")
              >
              > Wouldn't it be something like :
              >
              > #Y .X { }
              >

              • 4. Re: What is the correct CSS terminology for...
                Level 7
                "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                news:ga66ga$dbr$1@forums.macromedia.com...
                >
                > I checked a little further and I believe that's exactly what you want:
                >
                > *#Y.X

                I tend to fear the * because it's been pointed out to me that it's used as a
                hack to hide code from one of the versions of IE... I forget which one. I'd
                rather use something more universal if at all possible. But thanks.


                • 5. Re: What is the correct CSS terminology for...
                  Level 7
                  So in this instance, the space (or rather, lack of it) is important...
                  right?

                  "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  news:ga66hk$dd8$1@forums.macromedia.com...
                  > No. It would be -
                  >
                  > #Y.X
                  >
                  > "Mike" <mike@nospam.com> wrote in message
                  > news:ga65uo$cnj$1@forums.macromedia.com...
                  >>
                  >> Wouldn't it be something like :
                  >>
                  >> #Y .X { }


                  • 6. Re: What is the correct CSS terminology for...
                    Level 7
                    >> I checked a little further and I believe that's exactly what you want:
                    >>
                    >> *#Y.X

                    I don't think you need the asterisk. Patty can correct me if I'm wrong, but
                    I believe

                    #Y.X

                    will also get all instances of Y with a class of X (provided they're not
                    over-ridden elsewhere)

                    -Darrel

                    • 7. Re: What is the correct CSS terminology for...
                      Level 7
                      "Mike" <mike@nospam.com> wrote in message
                      news:ga65uo$cnj$1@forums.macromedia.com...
                      > All instances of class "X" that coincide with id="Y".
                      >
                      > (Div is ID="Y", but on some rare occasions, it will *also* be class="C")

                      Wow, how confusing was that question? Sorry for the typo. I meant "X" not
                      "C", but you guys already knew that. :-S


                      • 8. Re: What is the correct CSS terminology for...
                        Level 7

                        "Mike" <mike@nospam.com> wrote in message
                        news:ga685r$fcd$1@forums.macromedia.com...
                        > "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                        > news:ga66ga$dbr$1@forums.macromedia.com...
                        >>
                        >> I checked a little further and I believe that's exactly what you want:
                        >>
                        >> *#Y.X
                        >
                        > I tend to fear the * because it's been pointed out to me that it's used as
                        > a hack to hide code from one of the versions of IE... I forget which one.
                        > I'd rather use something more universal if at all possible. But thanks.

                        I don't think there's any reason for fearing it, but it sounds like the same
                        selector without the * will do the same, as Murray has posted.

                        --
                        Patty Ayers | www.WebDevBiz.com
                        Free Articles on the Business of Web Development
                        Web Design Contract, Estimate Request Form, Estimate Worksheet
                        --

                        • 9. Re: What is the correct CSS terminology for...
                          Level 7
                          Not sure about the space. I always tend to leave a space between css
                          selectors.

                          Like #Y .X {blah;}

                          <div id="Y">
                          <div class="X">Some content</div>
                          </div>

                          or do you mean combining an 'id' and a 'class'

                          <div id="Y" class="X">Some content</div>

                          #Y {blah;}

                          .X {blah;}



                          Mike wrote:
                          > So in this instance, the space (or rather, lack of it) is important...
                          > right?
                          >
                          > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                          > news:ga66hk$dd8$1@forums.macromedia.com...
                          >> No. It would be -
                          >>
                          >> #Y.X
                          >>
                          >> "Mike" <mike@nospam.com> wrote in message
                          >> news:ga65uo$cnj$1@forums.macromedia.com...
                          >>> Wouldn't it be something like :
                          >>>
                          >>> #Y .X { }
                          >
                          >
                          • 10. Re: What is the correct CSS terminology for...
                            Level 7
                            Yes! :-)


                            --
                            Patty Ayers | www.WebDevBiz.com
                            Free Articles on the Business of Web Development
                            Web Design Contract, Estimate Request Form, Estimate Worksheet
                            --

                            "Mike" <mike@nospam.com> wrote in message
                            news:ga687m$fe0$1@forums.macromedia.com...
                            > So in this instance, the space (or rather, lack of it) is important...
                            > right?
                            >
                            > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                            > news:ga66hk$dd8$1@forums.macromedia.com...
                            >> No. It would be -
                            >>
                            >> #Y.X
                            >>
                            >> "Mike" <mike@nospam.com> wrote in message
                            >> news:ga65uo$cnj$1@forums.macromedia.com...
                            >>>
                            >>> Wouldn't it be something like :
                            >>>
                            >>> #Y .X { }
                            >
                            >

                            • 11. Re: What is the correct CSS terminology for...
                              Level 7

                              "Osgood" <notavailable@thisaddress.com> wrote in message
                              news:ga68in$fsc$1@forums.macromedia.com...
                              > Not sure about the space. I always tend to leave a space between css
                              > selectors.

                              But it means something completely different depending upon whether there's a
                              space or not.

                              --
                              Patty Ayers | www.WebDevBiz.com
                              Free Articles on the Business of Web Development
                              Web Design Contract, Estimate Request Form, Estimate Worksheet
                              --

                              • 12. Re: What is the correct CSS terminology for...
                                Level 7
                                It's critical. Without it the selector won't fire for your example.

                                --
                                Murray --- ICQ 71997575
                                Adobe Community Expert
                                (If you *MUST* email me, don't LAUGH when you do so!)
                                ==================
                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                ==================


                                "Mike" <mike@nospam.com> wrote in message
                                news:ga687m$fe0$1@forums.macromedia.com...
                                > So in this instance, the space (or rather, lack of it) is important...
                                > right?
                                >
                                > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                > news:ga66hk$dd8$1@forums.macromedia.com...
                                >> No. It would be -
                                >>
                                >> #Y.X
                                >>
                                >> "Mike" <mike@nospam.com> wrote in message
                                >> news:ga65uo$cnj$1@forums.macromedia.com...
                                >>>
                                >>> Wouldn't it be something like :
                                >>>
                                >>> #Y .X { }
                                >
                                >

                                • 13. Re: What is the correct CSS terminology for...
                                  Level 7
                                  P@tty Ayers ~ACE wrote:
                                  >
                                  > "Osgood" <notavailable@thisaddress.com> wrote in message
                                  > news:ga68in$fsc$1@forums.macromedia.com...
                                  >> Not sure about the space. I always tend to leave a space between css
                                  >> selectors.
                                  >
                                  > But it means something completely different depending upon whether
                                  > there's a space or not.
                                  >
                                  Patty do you have an example where a space would NOT be required. I
                                  can't think that I've ever used one apart from stuff like below?

                                  a.blah

                                  div.blah


                                  I might be overlooking something here.
                                  • 14. Re: What is the correct CSS terminology for...
                                    Level 7
                                    > Not sure about the space. I always tend to leave a space between css
                                    > selectors.

                                    #Y.X = <tag id="Y" class="X"></tag>

                                    #Y .X = <tag id="Y"><tag class="X"></tag></tag>

                                    -Darrel
                                    • 15. Re: What is the correct CSS terminology for...
                                      Level 7
                                      As Patty has suggested, #A .B will select element with class B that is
                                      contained in element with ID A. It will not select element with ID A *and*
                                      class B. To select that element, you would use #A.B only.

                                      --
                                      Murray --- ICQ 71997575
                                      Adobe Community Expert
                                      (If you *MUST* email me, don't LAUGH when you do so!)
                                      ==================
                                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                      ==================


                                      "Osgood" <notavailable@thisaddress.com> wrote in message
                                      news:ga68ue$g1r$1@forums.macromedia.com...
                                      > P@tty Ayers ~ACE wrote:
                                      >>
                                      >> "Osgood" <notavailable@thisaddress.com> wrote in message
                                      >> news:ga68in$fsc$1@forums.macromedia.com...
                                      >>> Not sure about the space. I always tend to leave a space between css
                                      >>> selectors.
                                      >>
                                      >> But it means something completely different depending upon whether
                                      >> there's a space or not.
                                      >>
                                      > Patty do you have an example where a space would NOT be required. I can't
                                      > think that I've ever used one apart from stuff like below?
                                      >
                                      > a.blah
                                      >
                                      > div.blah
                                      >
                                      >
                                      > I might be overlooking something here.

                                      • 16. Re: What is the correct CSS terminology for...
                                        Level 7
                                        darrel wrote:
                                        >> Not sure about the space. I always tend to leave a space between css
                                        >> selectors.
                                        >
                                        > #Y.X = <tag id="Y" class="X"></tag>

                                        Hummmm seems I write my css a bit differently then. Probably not as
                                        efficient but I'm stuck in me ole ways. Whatever works for ya.

                                        • 17. Re: What is the correct CSS terminology for...
                                          Level 7
                                          So, how would you write that selector? As far as I know, there's only one
                                          way to get it.

                                          --
                                          Murray --- ICQ 71997575
                                          Adobe Community Expert
                                          (If you *MUST* email me, don't LAUGH when you do so!)
                                          ==================
                                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                          ==================


                                          "Osgood" <notavailable@thisaddress.com> wrote in message
                                          news:ga698g$g1r$3@forums.macromedia.com...
                                          > darrel wrote:
                                          >>> Not sure about the space. I always tend to leave a space between css
                                          >>> selectors.
                                          >>
                                          >> #Y.X = <tag id="Y" class="X"></tag>
                                          >
                                          > Hummmm seems I write my css a bit differently then. Probably not as
                                          > efficient but I'm stuck in me ole ways. Whatever works for ya.
                                          >

                                          • 18. Re: What is the correct CSS terminology for...
                                            Level 7
                                            By the way, here's my test page -

                                            <style type="text/css">
                                            #Y .X { color:red; }
                                            #Y.X { color:green; }
                                            #Y .X { color:red; }
                                            </style>
                                            </head>

                                            <body>
                                            <p id="Y" class="X">Testing testing</p>


                                            --
                                            Murray --- ICQ 71997575
                                            Adobe Community Expert
                                            (If you *MUST* email me, don't LAUGH when you do so!)
                                            ==================
                                            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                            ==================


                                            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                            news:ga69bi$gq6$1@forums.macromedia.com...
                                            > So, how would you write that selector? As far as I know, there's only one
                                            > way to get it.
                                            >
                                            > --
                                            > Murray --- ICQ 71997575
                                            > Adobe Community Expert
                                            > (If you *MUST* email me, don't LAUGH when you do so!)
                                            > ==================
                                            > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                            > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                            > ==================
                                            >
                                            >
                                            > "Osgood" <notavailable@thisaddress.com> wrote in message
                                            > news:ga698g$g1r$3@forums.macromedia.com...
                                            >> darrel wrote:
                                            >>>> Not sure about the space. I always tend to leave a space between css
                                            >>>> selectors.
                                            >>>
                                            >>> #Y.X = <tag id="Y" class="X"></tag>
                                            >>
                                            >> Hummmm seems I write my css a bit differently then. Probably not as
                                            >> efficient but I'm stuck in me ole ways. Whatever works for ya.
                                            >>
                                            >

                                            • 19. Re: What is the correct CSS terminology for...
                                              Level 7
                                              Murray *ACE* wrote:
                                              > As Patty has suggested, #A .B will select element with class B that is
                                              > contained in element with ID A. It will not select element with ID A
                                              > *and* class B. To select that element, you would use #A.B only.
                                              >

                                              I think the best thing would be to provide a simple example because I've
                                              obviously got this far without ever having used a combination without
                                              any space between selectors.


                                              Best example I can give is this. A black box with a red border:

                                              #black {
                                              color: #fff;
                                              background-color: #000000;
                                              }
                                              .red {
                                              border: 7px solid red;
                                              }


                                              <div id="black" class="red">hello</div>


                                              How does this work using the method discussed or can you give an
                                              alternative simple example using your method?

                                              • 20. Re: What is the correct CSS terminology for...
                                                Level 7

                                                "Osgood" <notavailable@thisaddress.com> wrote in message
                                                news:ga68ue$g1r$1@forums.macromedia.com...
                                                > P@tty Ayers ~ACE wrote:
                                                >>
                                                >> "Osgood" <notavailable@thisaddress.com> wrote in message
                                                >> news:ga68in$fsc$1@forums.macromedia.com...
                                                >>> Not sure about the space. I always tend to leave a space between css
                                                >>> selectors.
                                                >>
                                                >> But it means something completely different depending upon whether
                                                >> there's a space or not.
                                                >>
                                                > Patty do you have an example where a space would NOT be required. I can't
                                                > think that I've ever used one apart from stuff like below?
                                                >
                                                > a.blah
                                                >
                                                > div.blah

                                                Well, just something like:

                                                .myclass#myid { }

                                                Right?


                                                --
                                                Patty Ayers | www.WebDevBiz.com
                                                Free Articles on the Business of Web Development
                                                Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                --

                                                • 21. Re: What is the correct CSS terminology for...
                                                  Level 7
                                                  If you wanted your selector to ONLY apply to elements that were both #black
                                                  and .red, you would have to specify the two without space. But I can't
                                                  think of an instance of that case where your selectors wouldn't also work.
                                                  Obviously there would only be a single instance of #black on the page, and
                                                  so by definition, either selector would work.

                                                  This round goes to you, I believe.

                                                  --
                                                  Murray --- ICQ 71997575
                                                  Adobe Community Expert
                                                  (If you *MUST* email me, don't LAUGH when you do so!)
                                                  ==================
                                                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                  ==================


                                                  "Osgood" <notavailable@thisaddress.com> wrote in message
                                                  news:ga69v9$hh0$1@forums.macromedia.com...
                                                  > Murray *ACE* wrote:
                                                  >> As Patty has suggested, #A .B will select element with class B that is
                                                  >> contained in element with ID A. It will not select element with ID A
                                                  >> *and* class B. To select that element, you would use #A.B only.
                                                  >>
                                                  >
                                                  > I think the best thing would be to provide a simple example because I've
                                                  > obviously got this far without ever having used a combination without any
                                                  > space between selectors.
                                                  >
                                                  >
                                                  > Best example I can give is this. A black box with a red border:
                                                  >
                                                  > #black {
                                                  > color: #fff;
                                                  > background-color: #000000;
                                                  > }
                                                  > .red {
                                                  > border: 7px solid red;
                                                  > }
                                                  >
                                                  >
                                                  > <div id="black" class="red">hello</div>
                                                  >
                                                  >
                                                  > How does this work using the method discussed or can you give an
                                                  > alternative simple example using your method?
                                                  >

                                                  • 22. Re: What is the correct CSS terminology for...
                                                    Level 7
                                                    Murray *ACE* wrote:
                                                    > So, how would you write that selector? As far as I know, there's only
                                                    > one way to get it.
                                                    >

                                                    Well as I said in my previous post...I'm probably a bit stuck in the way
                                                    I produce css and would most likely do it this way. Less efficient
                                                    granted but it works and old habits die hard.


                                                    #box {
                                                    }
                                                    .test {
                                                    color: #3333FF;
                                                    }


                                                    <p id="box" class="test">Testing testing</p>


                                                    Usually there would be some css associated with the #box selector so its
                                                    not redundant.....hummmm
                                                    • 23. Re: What is the correct CSS terminology for...
                                                      Level 7
                                                      P@tty Ayers ~ACE wrote:
                                                      >
                                                      > "Osgood" <notavailable@thisaddress.com> wrote in message
                                                      > news:ga68ue$g1r$1@forums.macromedia.com...
                                                      >> P@tty Ayers ~ACE wrote:
                                                      >>>
                                                      >>> "Osgood" <notavailable@thisaddress.com> wrote in message
                                                      >>> news:ga68in$fsc$1@forums.macromedia.com...
                                                      >>>> Not sure about the space. I always tend to leave a space between css
                                                      >>>> selectors.
                                                      >>>
                                                      >>> But it means something completely different depending upon whether
                                                      >>> there's a space or not.
                                                      >>>
                                                      >> Patty do you have an example where a space would NOT be required. I
                                                      >> can't think that I've ever used one apart from stuff like below?
                                                      >>
                                                      >> a.blah
                                                      >>
                                                      >> div.blah
                                                      >
                                                      > Well, just something like:
                                                      >
                                                      > .myclass#myid { }
                                                      >
                                                      > Right?
                                                      >
                                                      >
                                                      I dunno because I don't write my css like that LOL

                                                      I would most likely do

                                                      #myID {
                                                      Blah;
                                                      }

                                                      .myClass {
                                                      blah;
                                                      }

                                                      Then

                                                      <div id="myID" class="myClass">Some stuff</div>

                                                      <shrug>
                                                      • 24. Re: What is the correct CSS terminology for...
                                                        Level 7
                                                        > Best example I can give is this. A black box with a red border:
                                                        >
                                                        > #black {
                                                        > color: #fff;
                                                        > background-color: #000000;
                                                        > }
                                                        > .red {
                                                        > border: 7px solid red;
                                                        > }
                                                        >
                                                        >
                                                        > <div id="black" class="red">hello</div>
                                                        >
                                                        >
                                                        > How does this work using the method discussed or can you give an
                                                        > alternative simple example using your method?

                                                        that method will give a background color to the element with an ID of
                                                        'black'. it will then give a border to any element with a class of red.

                                                        That's different than wanting 'only apply a border to an element that has a
                                                        class of red AND an ID of black.

                                                        -Darrel

                                                        • 25. Re: What is the correct CSS terminology for...
                                                          Level 7
                                                          darrel wrote:
                                                          >> Best example I can give is this. A black box with a red border:
                                                          >>
                                                          >> #black {
                                                          >> color: #fff;
                                                          >> background-color: #000000;
                                                          >> }
                                                          >> .red {
                                                          >> border: 7px solid red;
                                                          >> }
                                                          >>
                                                          >>
                                                          >> <div id="black" class="red">hello</div>
                                                          >>
                                                          >>
                                                          >> How does this work using the method discussed or can you give an
                                                          >> alternative simple example using your method?
                                                          >
                                                          > that method will give a background color to the element with an ID of
                                                          > 'black'. it will then give a border to any element with a class of red.
                                                          >
                                                          > That's different than wanting 'only apply a border to an element that
                                                          > has a class of red AND an ID of black.

                                                          OK I'm confused...why would I want to apply a border to class red, when
                                                          it already has a border?

                                                          <shrug> lol

                                                          • 26. Re: What is the correct CSS terminology for...
                                                            Level 7
                                                            Osgood wrote:
                                                            > darrel wrote:
                                                            >>> Best example I can give is this. A black box with a red border:
                                                            >>>
                                                            >>> #black {
                                                            >>> color: #fff;
                                                            >>> background-color: #000000;
                                                            >>> }
                                                            >>> .red {
                                                            >>> border: 7px solid red;
                                                            >>> }
                                                            >>>
                                                            >>>
                                                            >>> <div id="black" class="red">hello</div>
                                                            >>>
                                                            >>>
                                                            >>> How does this work using the method discussed or can you give an
                                                            >>> alternative simple example using your method?
                                                            >>
                                                            >> that method will give a background color to the element with an ID of
                                                            >> 'black'. it will then give a border to any element with a class of red.
                                                            >>
                                                            >> That's different than wanting 'only apply a border to an element that
                                                            >> has a class of red AND an ID of black.
                                                            >
                                                            > OK I'm confused...why would I want to apply a border to class red, when
                                                            > it already has a border?
                                                            >
                                                            > <shrug> lol
                                                            >
                                                            The plot gets deeper. I would never write css were the 'class' trumps
                                                            the 'id' in this order.

                                                            .myClass #myID or .myClass#myID

                                                            I don't even know if it works to be honest as its not the way I write
                                                            css. I'm willing to accept its ok if others have tested it but I won't
                                                            be using it in a hurry as I don't see where it would fit in given the
                                                            way I write my css.

                                                            Each to his/her own I guess.
                                                            • 27. Re: What is the correct CSS terminology for...
                                                              Level 7

                                                              "Osgood" <notavailable@thisaddress.com> wrote in message
                                                              news:ga6aum$ihu$2@forums.macromedia.com...

                                                              > I dunno because I don't write my css like that LOL

                                                              Ok.. I'm just wondering, then, how would you write a selector that "selects
                                                              any element with both a class of "myclass" and an ID of "myid"?


                                                              --
                                                              Patty Ayers | www.WebDevBiz.com
                                                              Free Articles on the Business of Web Development
                                                              Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                              --

                                                              • 28. Re: What is the correct CSS terminology for...
                                                                Level 7
                                                                Read my post, Patty. To be truthful, and since you can only have a single
                                                                #myid on the page, then having two separate rules for each would work fine:

                                                                #myid { ... }
                                                                .myclass { ... }

                                                                --
                                                                Murray --- ICQ 71997575
                                                                Adobe Community Expert
                                                                (If you *MUST* email me, don't LAUGH when you do so!)
                                                                ==================
                                                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                ==================


                                                                "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                                                                news:ga6ctn$l3d$1@forums.macromedia.com...
                                                                >
                                                                > "Osgood" <notavailable@thisaddress.com> wrote in message
                                                                > news:ga6aum$ihu$2@forums.macromedia.com...
                                                                >
                                                                >> I dunno because I don't write my css like that LOL
                                                                >
                                                                > Ok.. I'm just wondering, then, how would you write a selector that
                                                                > "selects any element with both a class of "myclass" and an ID of "myid"?
                                                                >
                                                                >
                                                                > --
                                                                > Patty Ayers | www.WebDevBiz.com
                                                                > Free Articles on the Business of Web Development
                                                                > Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                                > --
                                                                >

                                                                • 29. Re: What is the correct CSS terminology for...
                                                                  Level 7
                                                                  True - how about with two classes? Can you write a single selector that will
                                                                  "select any element with both "myclass" and "myotherclass", while always
                                                                  using spaces in the selector?

                                                                  Can you write a selector that will "select any h1 element with a class of
                                                                  "myclass", while always using spaces in the selector?

                                                                  I had understood that we were discussing Osgood's statement that he never
                                                                  found any reason to write a selector with no spaces it in, which seemed
                                                                  strange to me.

                                                                  --
                                                                  Patty Ayers | www.WebDevBiz.com
                                                                  Free Articles on the Business of Web Development
                                                                  Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                                  --

                                                                  "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                                  news:ga6dc8$lll$1@forums.macromedia.com...
                                                                  > Read my post, Patty. To be truthful, and since you can only have a single
                                                                  > #myid on the page, then having two separate rules for each would work
                                                                  > fine:
                                                                  >
                                                                  > #myid { ... }
                                                                  > .myclass { ... }
                                                                  >
                                                                  > --
                                                                  > Murray --- ICQ 71997575
                                                                  > Adobe Community Expert
                                                                  > (If you *MUST* email me, don't LAUGH when you do so!)
                                                                  > ==================
                                                                  > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                  > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                  > ==================
                                                                  >
                                                                  >
                                                                  > "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                                                                  > news:ga6ctn$l3d$1@forums.macromedia.com...
                                                                  >>
                                                                  >> "Osgood" <notavailable@thisaddress.com> wrote in message
                                                                  >> news:ga6aum$ihu$2@forums.macromedia.com...
                                                                  >>
                                                                  >>> I dunno because I don't write my css like that LOL
                                                                  >>
                                                                  >> Ok.. I'm just wondering, then, how would you write a selector that
                                                                  >> "selects any element with both a class of "myclass" and an ID of "myid"?
                                                                  >>
                                                                  >>
                                                                  >> --
                                                                  >> Patty Ayers | www.WebDevBiz.com
                                                                  >> Free Articles on the Business of Web Development
                                                                  >> Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                                  >> --
                                                                  >>
                                                                  >

                                                                  • 30. Re: What is the correct CSS terminology for...
                                                                    Level 7
                                                                    I think the same argument would apply there in fact. It wouldn't matter
                                                                    which way you wrote the selector(s)....

                                                                    .red { ... }
                                                                    .orange { ... }

                                                                    or

                                                                    .red.orange { ... }

                                                                    <p class="red orange">

                                                                    > Can you write a selector that will "select any h1 element with a class of
                                                                    > "myclass", while always using spaces in the selector?

                                                                    That's clearly a different situation, and I think the answer is NO, you
                                                                    cannot.

                                                                    h1.myclass { ... }

                                                                    would be the only way it would work.

                                                                    --
                                                                    Murray --- ICQ 71997575
                                                                    Adobe Community Expert
                                                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                                                    ==================
                                                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                    ==================


                                                                    "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                                                                    news:ga6egp$n1a$1@forums.macromedia.com...
                                                                    > True - how about with two classes? Can you write a single selector that
                                                                    > will "select any element with both "myclass" and "myotherclass", while
                                                                    > always using spaces in the selector?
                                                                    >
                                                                    > Can you write a selector that will "select any h1 element with a class of
                                                                    > "myclass", while always using spaces in the selector?
                                                                    >
                                                                    > I had understood that we were discussing Osgood's statement that he never
                                                                    > found any reason to write a selector with no spaces it in, which seemed
                                                                    > strange to me.
                                                                    >
                                                                    > --
                                                                    > Patty Ayers | www.WebDevBiz.com
                                                                    > Free Articles on the Business of Web Development
                                                                    > Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                                    > --
                                                                    >
                                                                    > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                                                    > news:ga6dc8$lll$1@forums.macromedia.com...
                                                                    >> Read my post, Patty. To be truthful, and since you can only have a
                                                                    >> single #myid on the page, then having two separate rules for each would
                                                                    >> work fine:
                                                                    >>
                                                                    >> #myid { ... }
                                                                    >> .myclass { ... }
                                                                    >>
                                                                    >> --
                                                                    >> Murray --- ICQ 71997575
                                                                    >> Adobe Community Expert
                                                                    >> (If you *MUST* email me, don't LAUGH when you do so!)
                                                                    >> ==================
                                                                    >> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                                                    >> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                                                    >> ==================
                                                                    >>
                                                                    >>
                                                                    >> "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in
                                                                    >> message news:ga6ctn$l3d$1@forums.macromedia.com...
                                                                    >>>
                                                                    >>> "Osgood" <notavailable@thisaddress.com> wrote in message
                                                                    >>> news:ga6aum$ihu$2@forums.macromedia.com...
                                                                    >>>
                                                                    >>>> I dunno because I don't write my css like that LOL
                                                                    >>>
                                                                    >>> Ok.. I'm just wondering, then, how would you write a selector that
                                                                    >>> "selects any element with both a class of "myclass" and an ID of "myid"?
                                                                    >>>
                                                                    >>>
                                                                    >>> --
                                                                    >>> Patty Ayers | www.WebDevBiz.com
                                                                    >>> Free Articles on the Business of Web Development
                                                                    >>> Web Design Contract, Estimate Request Form, Estimate Worksheet
                                                                    >>> --
                                                                    >>>
                                                                    >>
                                                                    >

                                                                    • 31. Re: What is the correct CSS terminology for...
                                                                      Level 7
                                                                      .oO(Mike)

                                                                      >"P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                                                                      >news:ga66ga$dbr$1@forums.macromedia.com...
                                                                      >>
                                                                      >> I checked a little further and I believe that's exactly what you want:
                                                                      >>
                                                                      >> *#Y.X
                                                                      >
                                                                      >I tend to fear the * because it's been pointed out to me that it's used as a
                                                                      >hack to hide code from one of the versions of IE... I forget which one. I'd
                                                                      >rather use something more universal if at all possible. But thanks.

                                                                      *#Y {...}
                                                                      #Y {...}

                                                                      are equivalent. In many cases the universal selector (*) can be omitted,
                                                                      if it's not the only component of a selector:

                                                                      *.foo {...}
                                                                      .foo {...}

                                                                      Same thing.

                                                                      http://www.w3.org/TR/CSS21/selector.html#universal-selector

                                                                      What you're referring to is the star hack, which also uses the universal
                                                                      selector, but is a completely different thing:

                                                                      * html {...}

                                                                      Technically this refers to an html element, which is a child of some
                                                                      other element. But in an HTML document 'html' already is the root -
                                                                      there's no other element above it! So in a real browser this selector
                                                                      refers to an element which simply doesn't exist (and never will), hence
                                                                      the rule is not applied to anything. But not so in some older IEs ...

                                                                      You should avoid such hacks, because conditional comments are far more
                                                                      reliable and the recommend way to provide IE-specific CSS rules.

                                                                      Micha
                                                                      • 32. Re: What is the correct CSS terminology for...
                                                                        Level 7
                                                                        .oO(Murray *ACE*)

                                                                        >Read my post, Patty. To be truthful, and since you can only have a single
                                                                        >#myid on the page, then having two separate rules for each would work fine:
                                                                        >
                                                                        >#myid { ... }
                                                                        >.myclass { ... }

                                                                        You can still have things like

                                                                        #myid.foo {color: red}
                                                                        #myid.bar {color: blue}

                                                                        Of course an ID must be unique within a single page, but nothing forbids
                                                                        to use it in another context on another page.

                                                                        Micha
                                                                        • 33. Re: What is the correct CSS terminology for...
                                                                          Level 7
                                                                          .oO(Murray *ACE*)

                                                                          >I think the same argument would apply there in fact. It wouldn't matter
                                                                          >which way you wrote the selector(s)....
                                                                          >
                                                                          >.red { ... }
                                                                          >.orange { ... }
                                                                          >
                                                                          >or
                                                                          >
                                                                          >.red.orange { ... }

                                                                          It _does_ matter! It's a different meaning.

                                                                          For example in my own default CSS I have a class 'admin', which usually
                                                                          just sets a different background color on the elements it's applied to
                                                                          (for example to highlight some things on the page that only the admin
                                                                          will see).

                                                                          But in some cases I want to do some more changes to an element if it's
                                                                          in "admin mode" than just a different background, so I _have_ to write
                                                                          it this way:

                                                                          .foo.admin {...}
                                                                          .bar.admin {...}

                                                                          Splitting them like in your example above would not work.

                                                                          >> Can you write a selector that will "select any h1 element with a class of
                                                                          >> "myclass", while always using spaces in the selector?
                                                                          >
                                                                          >That's clearly a different situation, and I think the answer is NO, you
                                                                          >cannot.
                                                                          >
                                                                          >h1.myclass { ... }
                                                                          >
                                                                          >would be the only way it would work.

                                                                          Correct.

                                                                          Micha
                                                                          • 34. Re: What is the correct CSS terminology for...
                                                                            Level 7
                                                                            Hello,

                                                                            You only need "fear" the * if it's followed by HTML.
                                                                            That's the star hack to serve up a rule to only IE6 and earlier while all
                                                                            other browsers ignore it.

                                                                            Take care,
                                                                            Tim



                                                                            "Mike" <mike@nospam.com> wrote in message
                                                                            news:ga685r$fcd$1@forums.macromedia.com...
                                                                            > "P@tty Ayers ~ACE" <signup1REMOVE@ayersvirtualREMOVE.com> wrote in message
                                                                            > news:ga66ga$dbr$1@forums.macromedia.com...
                                                                            >>
                                                                            >> I checked a little further and I believe that's exactly what you want:
                                                                            >>
                                                                            >> *#Y.X
                                                                            >
                                                                            > I tend to fear the * because it's been pointed out to me that it's used as
                                                                            > a hack to hide code from one of the versions of IE... I forget which one.
                                                                            > I'd rather use something more universal if at all possible. But thanks.
                                                                            >


                                                                            • 35. Re: What is the correct CSS terminology for...
                                                                              Level 7
                                                                              Michael Fesser wrote:
                                                                              > .oO(Murray *ACE*)
                                                                              >
                                                                              >> I think the same argument would apply there in fact. It wouldn't matter
                                                                              >> which way you wrote the selector(s)....
                                                                              >>
                                                                              >> .red { ... }
                                                                              >> .orange { ... }
                                                                              >>
                                                                              >> or
                                                                              >>
                                                                              >> .red.orange { ... }
                                                                              >
                                                                              > It _does_ matter! It's a different meaning.
                                                                              >
                                                                              > For example in my own default CSS I have a class 'admin', which usually
                                                                              > just sets a different background color on the elements it's applied to
                                                                              > (for example to highlight some things on the page that only the admin
                                                                              > will see).
                                                                              >
                                                                              > But in some cases I want to do some more changes to an element if it's
                                                                              > in "admin mode" than just a different background, so I _have_ to write
                                                                              > it this way:
                                                                              >
                                                                              > .foo.admin {...}
                                                                              > .bar.admin {...}
                                                                              >
                                                                              > Splitting them like in your example above would not work.

                                                                              Then you'd just write it like this:

                                                                              #myBar {
                                                                              }
                                                                              .myClass1 {
                                                                              background-color: #FF3333;
                                                                              }
                                                                              .myClass2 {
                                                                              background-color: #CC9900;
                                                                              }


                                                                              <div id="myBar" class="myClass1"><p>hello</p></div>
                                                                              <div id="myBar" class="myClass2"><p>hello</p></div>


                                                                              Both work as far as I can deduce.....you pays your money you takes your
                                                                              choice.


                                                                              >
                                                                              >>> Can you write a selector that will "select any h1 element with a class of
                                                                              >>> "myclass", while always using spaces in the selector?
                                                                              >> That's clearly a different situation, and I think the answer is NO, you
                                                                              >> cannot.
                                                                              >>
                                                                              >> h1.myclass { ... }
                                                                              >>
                                                                              >> would be the only way it would work.
                                                                              >
                                                                              > Correct.
                                                                              >
                                                                              > Micha
                                                                              • 36. Re: What is the correct CSS terminology for...
                                                                                Level 7
                                                                                P@tty Ayers ~ACE wrote:

                                                                                > Can you write a selector that will "select any h1 element with a class
                                                                                > of "myclass", while always using spaces in the selector?


                                                                                I think the issue is everything is getting mixed up because of the way
                                                                                people 'prefer' to write their css.

                                                                                There is no difference between the following two (apart from the h1 has
                                                                                been left out infront of the myClass css. Both will provide identical
                                                                                results.

                                                                                h1 {
                                                                                font-size: 30px;
                                                                                }


                                                                                h1.myClass {
                                                                                border: 1px solid #000;
                                                                                }

                                                                                and

                                                                                h1 {
                                                                                font-size: 30px;
                                                                                }

                                                                                .myClass {
                                                                                border: 1px solid #000;
                                                                                }

                                                                                ~

                                                                                The h1 still has to be written like

                                                                                <h1 class="myClass">Some Content</h1>

                                                                                Its the h1 or whatever is infront of the class or id that really does'nt
                                                                                need to be there. Its there ONLY because some people find it easier to
                                                                                know what tag the class or iT is associated with.

                                                                                Like

                                                                                table#mytable

                                                                                div.myDiv

                                                                                the bit infront is meaningless in terms of styling.

                                                                                • 37. Re: What is the correct CSS terminology for...
                                                                                  Level 7
                                                                                  .oO(Osgood)

                                                                                  >P@tty Ayers ~ACE wrote:
                                                                                  >
                                                                                  >> Can you write a selector that will "select any h1 element with a class
                                                                                  >> of "myclass", while always using spaces in the selector?
                                                                                  >
                                                                                  >
                                                                                  >I think the issue is everything is getting mixed up because of the way
                                                                                  >people 'prefer' to write their css.

                                                                                  Nope. It's not about preference, but about different semantics.

                                                                                  >There is no difference between the following two (apart from the h1 has
                                                                                  >been left out infront of the myClass css. Both will provide identical
                                                                                  >results.
                                                                                  >
                                                                                  >h1 {
                                                                                  >font-size: 30px;
                                                                                  >}
                                                                                  >
                                                                                  >
                                                                                  >h1.myClass {
                                                                                  >border: 1px solid #000;
                                                                                  >}
                                                                                  >
                                                                                  >and
                                                                                  >
                                                                                  >h1 {
                                                                                  >font-size: 30px;
                                                                                  >}
                                                                                  >
                                                                                  >.myClass {
                                                                                  >border: 1px solid #000;
                                                                                  >}

                                                                                  There _is_ a difference! Both examples mean different things and
                                                                                  dependent on the markup they will lead to different results:

                                                                                  <h1 class="myclass">a heading</h1>
                                                                                  <p class="myclass">a paragraph</p>

                                                                                  >The h1 still has to be written like
                                                                                  >
                                                                                  ><h1 class="myClass">Some Content</h1>
                                                                                  >
                                                                                  >Its the h1 or whatever is infront of the class or id that really does'nt
                                                                                  >need to be there. Its there ONLY because some people find it easier to
                                                                                  >know what tag the class or iT is associated with.

                                                                                  That's not the only reason.

                                                                                  >Like
                                                                                  >
                                                                                  >table#mytable
                                                                                  >
                                                                                  >div.myDiv
                                                                                  >
                                                                                  >the bit infront is meaningless in terms of styling.

                                                                                  Yes, but it's still a different selector with another specificity,
                                                                                  matching different elements.

                                                                                  Micha
                                                                                  • 38. Re: What is the correct CSS terminology for...
                                                                                    Level 7
                                                                                    .oO(Osgood)

                                                                                    >Michael Fesser wrote:
                                                                                    >>
                                                                                    >> For example in my own default CSS I have a class 'admin', which usually
                                                                                    >> just sets a different background color on the elements it's applied to
                                                                                    >> (for example to highlight some things on the page that only the admin
                                                                                    >> will see).
                                                                                    >>
                                                                                    >> But in some cases I want to do some more changes to an element if it's
                                                                                    >> in "admin mode" than just a different background, so I _have_ to write
                                                                                    >> it this way:
                                                                                    >>
                                                                                    >> .foo.admin {...}
                                                                                    >> .bar.admin {...}
                                                                                    >>
                                                                                    >> Splitting them like in your example above would not work.
                                                                                    >
                                                                                    >Then you'd just write it like this:
                                                                                    >
                                                                                    >#myBar {
                                                                                    >}
                                                                                    >.myClass1 {
                                                                                    >background-color: #FF3333;
                                                                                    >}
                                                                                    >.myClass2 {
                                                                                    >background-color: #CC9900;
                                                                                    >}

                                                                                    Totally different thing. In my example I explicitly want to match
                                                                                    elements which have both a 'foo' and an 'admin' class. This can't be
                                                                                    achieved with separate selectors without having side-effects. As said,
                                                                                    my 'admin' class can lead to different results, dependent on which
                                                                                    element it is applied to.

                                                                                    A real example from my projects. This is the main style of my admin
                                                                                    class:

                                                                                    .admin {background-color: #EDC}

                                                                                    Its main purpose is to indicate admin-only informations on a page, as
                                                                                    said before.

                                                                                    Then I have a class for creating small navigation or information bars
                                                                                    with arbitrary content, I call them panels. This is an excerpt from
                                                                                    their CSS:

                                                                                    .panel {font-size: 80%; border: 2px groove #DDD; overflow: hidden}

                                                                                    But now I also want to have a special style for an admin panel, so I
                                                                                    need to combine both classes if I want to add special rules:

                                                                                    .panel.admin {opacity: .4}
                                                                                    .panel.admin:hover {opacity: 1}

                                                                                    Nice little effect, BTW. But this can only be accomplished with the
                                                                                    selectors as shown! I don't want it to affect the general .panel nor the
                                                                                    .admin class, only the combination of them both should have this effect.

                                                                                    Micha
                                                                                    • 39. Re: What is the correct CSS terminology for...
                                                                                      Level 7
                                                                                      Michael Fesser wrote:
                                                                                      > .oO(Osgood)
                                                                                      >
                                                                                      >> P@tty Ayers ~ACE wrote:
                                                                                      >>
                                                                                      >>> Can you write a selector that will "select any h1 element with a class
                                                                                      >>> of "myclass", while always using spaces in the selector?
                                                                                      >>
                                                                                      >> I think the issue is everything is getting mixed up because of the way
                                                                                      >> people 'prefer' to write their css.
                                                                                      >
                                                                                      > Nope. It's not about preference, but about different semantics.
                                                                                      >
                                                                                      >> There is no difference between the following two (apart from the h1 has
                                                                                      >> been left out infront of the myClass css. Both will provide identical
                                                                                      >> results.
                                                                                      >>
                                                                                      >> h1 {
                                                                                      >> font-size: 30px;
                                                                                      >> }
                                                                                      >>
                                                                                      >>
                                                                                      >> h1.myClass {
                                                                                      >> border: 1px solid #000;
                                                                                      >> }
                                                                                      >>
                                                                                      >> and
                                                                                      >>
                                                                                      >> h1 {
                                                                                      >> font-size: 30px;
                                                                                      >> }
                                                                                      >>
                                                                                      >> .myClass {
                                                                                      >> border: 1px solid #000;
                                                                                      >> }
                                                                                      >
                                                                                      > There _is_ a difference! Both examples mean different things and
                                                                                      > dependent on the markup they will lead to different results:
                                                                                      >
                                                                                      > <h1 class="myclass">a heading</h1>
                                                                                      > <p class="myclass">a paragraph</p>


                                                                                      Sure but thats why I almost never put an 'indicator' infront of a
                                                                                      class...simply because I can reuse the class on 'any' tag I choose.


                                                                                      >
                                                                                      >> The h1 still has to be written like
                                                                                      >>
                                                                                      >> <h1 class="myClass">Some Content</h1>
                                                                                      >>
                                                                                      >> Its the h1 or whatever is infront of the class or id that really does'nt
                                                                                      >> need to be there. Its there ONLY because some people find it easier to
                                                                                      >> know what tag the class or iT is associated with.
                                                                                      >
                                                                                      > That's not the only reason.

                                                                                      It's the only reason for 'me'


                                                                                      >> Like
                                                                                      >>
                                                                                      >> table#mytable
                                                                                      >>
                                                                                      >> div.myDiv
                                                                                      >>
                                                                                      >> the bit infront is meaningless in terms of styling.
                                                                                      >
                                                                                      > Yes, but it's still a different selector with another specificity,
                                                                                      > matching different elements.

                                                                                      I can't see a reason for doing the above. I never do but thats not to
                                                                                      say others shouldn't if it suites their way of working.

                                                                                      1 2 Previous Next