We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 3763
    • 155 Posts
    Hello guys,

    I am redesigning my homepage and while looking at the CSS I’ve noticed there are a lot of elements where I use !important
    Can somebody clarify me, how can I style the same element, once as general rule and once for a specific part without !important.

    For example we have this HTML code:
    ...
    <body>
    <div id="wrap">
       <p>Blah blah blah</p>
       <p>Blah blah blah</p>
       <p>Blah blah blah</p>
       <p>Blah blah blah</p>
    
       <div class="ticket">
          <p>this is another paragraph</p>
          <ul>
             <li>item-1</li>
             <li>item-2</li>
             <li>item-3</li>
          </ul>
       </div> <!--/ticket-->
    </div><!--/wrap-->
    </body>
    ...


    Now we use this CSS:
    p {
       margin:0 0 2em;
    }
    
    .ticket p {
       margin:0;
    }


    margin properties of the second paragraph (child of .ticket) are not correct, only when I use:
    .ticket p {
       margin:0 !important;
    }


    Is there something wrong on how I’ve addressed this problem? How are all you experts doing this?

    Thank you a lot!
    Boby
      ...my Photo Gallery on Flickr...
      • 11975
      • 2,542 Posts
      Hi

      have you tried

      #wrap .ticket p {
         margin:0;
      }
      


      :-)

      edit : removed the typo mentioned by ryan ;-)
        Made with MODx : [url=http://www.copadel.com]copadel, fruits et l
        • 25663 MODX Staff
        • 12,272 Posts
        That’d be just margin: 0; (left an extra "t" in there...)
          Ryan Thrash, MODX Co-Founder
          Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
          • 3763
          • 155 Posts
          LooooL
          Works perfect grin grin

          Thank you very much!

          Just one little questions, why is #wrap .ticket p more "powerfull" than simply .ticket p?

          Boby

          That’d be just margin: 0; (left an extra "t" in there...)
          Yep, noticed that little typo wink
            ...my Photo Gallery on Flickr...
            • 25663 MODX Staff
            • 12,272 Posts
            #wrap is an ID. According to the CSS spec, IDs are unique to every page (only used once per page) and therefore are more "specific". CSS takes advantage of specificity (and the order rules are written) to determine which rules prevail.

            "#wrap .ticket p" translates in human terms to "find all the paragraphs contained in any block-level element classed as a .ticket element, that’s enclosed in a block-level element with an ID of wrap".

            HTH...
              Ryan Thrash, MODX Co-Founder
              Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
              • 3763
              • 155 Posts
              Thank you very much Ryan smiley
                ...my Photo Gallery on Flickr...
                • 6676
                • 8 Posts
                I think .ticket refers to a class element

                In case you define like .ticket p { ###}

                you should use like < p class ="ticket">

                I do hope it helps tongue

                Admin Note Bad info... see below
                  • 5727
                  • 160 Posts
                  Here is a good reference on this matter:

                  http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
                    Olivier Deland
                    Montreal, Canada - Web Developer
                    • 25663 MODX Staff
                    • 12,272 Posts
                    Quote from: davemod at Mar 19, 2007, 05:02 PM

                    I think .ticket refers to a class element

                    In case you define like .ticket p { ###}

                    you should use like < p class ="ticket">

                    I do hope it helps tongue

                    Sadly, that’s absolutely incorrect and could confuse people. Your CSS example above would not match your HTML Example. The following two examples would work:

                    p.ticket { blah } <p class="ticket">...
                    
                    or 
                    
                    .ticket p { blah } <div class="ticket"><p> ... 
                      Ryan Thrash, MODX Co-Founder
                      Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me