Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Other Discussions
  3. The Weird and The Wonderful
  4. CSS: [ ] selector

CSS: [ ] selector

Scheduled Pinned Locked Moved The Weird and The Wonderful
tutorialcsscomarchitecturequestion
14 Posts 8 Posters 12 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R raddevus

    Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

    #mainThang{color:blue;border: 5px solid red;}

    .articleTitle {font-size:xx-large;color:red}

    This Explains Everything

    All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

    brackets to indicate the attribute of the element:

    img[alt] {border: 3px solid red;}
    elephant pic
    bird pic

    The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

    F Offline
    F Offline
    Forogar
    wrote on last edited by
    #2

    Interesting. I avoid messing with CSS as much as possible, jQuery is my thing, but I suppose I should spend a little more time on learning about it.... maybe next year.

    - I would love to change the world, but they won’t give me the source code.

    R 1 Reply Last reply
    0
    • R raddevus

      Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

      #mainThang{color:blue;border: 5px solid red;}

      .articleTitle {font-size:xx-large;color:red}

      This Explains Everything

      All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

      brackets to indicate the attribute of the element:

      img[alt] {border: 3px solid red;}
      elephant pic
      bird pic

      The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

      Richard DeemingR Offline
      Richard DeemingR Offline
      Richard Deeming
      wrote on last edited by
      #3

      You can also select elements based on full or partial matches of the attribute value: Attribute selectors - CSS: Cascading Style Sheets | MDN[^]


      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

      R 1 Reply Last reply
      0
      • R raddevus

        Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

        #mainThang{color:blue;border: 5px solid red;}

        .articleTitle {font-size:xx-large;color:red}

        This Explains Everything

        All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

        brackets to indicate the attribute of the element:

        img[alt] {border: 3px solid red;}
        elephant pic
        bird pic

        The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

        B Offline
        B Offline
        BabyYoda
        wrote on last edited by
        #4

        There are a lot of different selectors. Here's some more, CSS Selectors Reference[^]

        R 1 Reply Last reply
        0
        • F Forogar

          Interesting. I avoid messing with CSS as much as possible, jQuery is my thing, but I suppose I should spend a little more time on learning about it.... maybe next year.

          - I would love to change the world, but they won’t give me the source code.

          R Offline
          R Offline
          raddevus
          wrote on last edited by
          #5

          � Forogar � wrote:

          I avoid messing with CSS as much as possible,

          Me too. Boostrap [^] will definitely spoil you if you try it out. It basically style controls for you in HTML the same we were able to depend upon Microsoft to do all that for us on WinForms in the past.

          F 1 Reply Last reply
          0
          • Richard DeemingR Richard Deeming

            You can also select elements based on full or partial matches of the attribute value: Attribute selectors - CSS: Cascading Style Sheets | MDN[^]


            "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

            R Offline
            R Offline
            raddevus
            wrote on last edited by
            #6

            Richard Deeming wrote:

            You can also select elements based on full or partial matches of the attribute value

            :thumbsup: Yeah, there's a lot more granularity there than I had ever known. Good stuff really.

            K 1 Reply Last reply
            0
            • B BabyYoda

              There are a lot of different selectors. Here's some more, CSS Selectors Reference[^]

              R Offline
              R Offline
              raddevus
              wrote on last edited by
              #7

              W3Schools is a good reference. I use it all the time. Thanks

              1 Reply Last reply
              0
              • R raddevus

                � Forogar � wrote:

                I avoid messing with CSS as much as possible,

                Me too. Boostrap [^] will definitely spoil you if you try it out. It basically style controls for you in HTML the same we were able to depend upon Microsoft to do all that for us on WinForms in the past.

                F Offline
                F Offline
                Forogar
                wrote on last edited by
                #8

                Yeah, we use Bootstrap as well. I like it because "it just works".

                - I would love to change the world, but they won’t give me the source code.

                R 1 Reply Last reply
                0
                • F Forogar

                  Yeah, we use Bootstrap as well. I like it because "it just works".

                  - I would love to change the world, but they won’t give me the source code.

                  R Offline
                  R Offline
                  raddevus
                  wrote on last edited by
                  #9

                  Forogar wrote:

                  I like it because "it just works".

                  :thumbsup: Absolutely! It's actually quite easy to learn from the bootstrap examples too.

                  1 Reply Last reply
                  0
                  • R raddevus

                    Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

                    #mainThang{color:blue;border: 5px solid red;}

                    .articleTitle {font-size:xx-large;color:red}

                    This Explains Everything

                    All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

                    brackets to indicate the attribute of the element:

                    img[alt] {border: 3px solid red;}
                    elephant pic
                    bird pic

                    The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

                    Mike HankeyM Offline
                    Mike HankeyM Offline
                    Mike Hankey
                    wrote on last edited by
                    #10

                    Yes, but the only reason is I have and have read that book. :)

                    I'm not sure how many cookies it makes to be happy, but so far it's not 27. JaxCoder.com

                    R 1 Reply Last reply
                    0
                    • Mike HankeyM Mike Hankey

                      Yes, but the only reason is I have and have read that book. :)

                      I'm not sure how many cookies it makes to be happy, but so far it's not 27. JaxCoder.com

                      R Offline
                      R Offline
                      raddevus
                      wrote on last edited by
                      #11

                      Mike Hankey wrote:

                      Yes, but the only reason is I have and have read that book.

                      Fantastic! :thumbsup::thumbsup::thumbsup: :)

                      1 Reply Last reply
                      0
                      • R raddevus

                        Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

                        #mainThang{color:blue;border: 5px solid red;}

                        .articleTitle {font-size:xx-large;color:red}

                        This Explains Everything

                        All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

                        brackets to indicate the attribute of the element:

                        img[alt] {border: 3px solid red;}
                        elephant pic
                        bird pic

                        The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

                        M Offline
                        M Offline
                        Marc Clifton
                        wrote on last edited by
                        #12

                        raddevus wrote:

                        I like learning. Learning's my favorite.

                        Followed by ranting about what I learned, at least for me. :laugh:

                        Latest Articles:
                        Thread Safe Quantized Temporal Frame Ring Buffer

                        1 Reply Last reply
                        0
                        • R raddevus

                          Trying to tighten up my CSS skills so I'm reading, CSS: The Definitive Guide[^] (4th ed) O'Reilly pub., and I learned something about CSS selectors I've never seen before. If you have only a bit of CSS knowledge (like me) then you probably know you can create : 1) id selectors (indicated by # symbol)

                          #mainThang{color:blue;border: 5px solid red;}

                          .articleTitle {font-size:xx-large;color:red}

                          This Explains Everything

                          All Elements With An Attribute But, did you know you could select all elements that have a particular attribute? For example you can select every img

                          brackets to indicate the attribute of the element:

                          img[alt] {border: 3px solid red;}
                          elephant pic
                          bird pic

                          The first two images would get the style applied, but the last one wouldn't. I like learning. Learning's my favorite. :)

                          P Offline
                          P Offline
                          Phil Boyd
                          wrote on last edited by
                          #13

                          wait until you find out about the pseudo-selectors like nth-child... :wtf:

                          Phil

                          1 Reply Last reply
                          0
                          • R raddevus

                            Richard Deeming wrote:

                            You can also select elements based on full or partial matches of the attribute value

                            :thumbsup: Yeah, there's a lot more granularity there than I had ever known. Good stuff really.

                            K Offline
                            K Offline
                            kapalmuks 3
                            wrote on last edited by
                            #14

                            😘😘😘😘

                            1 Reply Last reply
                            0
                            Reply
                            • Reply as topic
                            Log in to reply
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes


                            • Login

                            • Don't have an account? Register

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • World
                            • Users
                            • Groups