Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    css property order?

    Hello, I just realized that the order you place the css background properties in is important, and effects how they work. I found this out after placing background:url(pic.png) after background-attachment:fixed . Doing so caused the background image to not be fixed.

    My question is, are there other css properties that need to be in a certain order for them to work properly? And if so, could someone list these for me, or point me somewhere that might have them listed?

    I just did some reorganization of my css, and reordered some properties to my liking, not knowing the order mattered, so I'm worried some other things may not work properly now

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The one nearest the end always takes priority.

    Since background: includes background-attachment: specifying it after the attachment replaces that value.

    Had you specified background-image: instead of background: then you wouldn't have overwritten the attachment setting.

    Specifying background: is a shortcut for specifying values for all of
    background-color:
    background-image:
    background-repeat:
    background-attachment:
    background-position:

    and overwrites all of those.
    Last edited by felgall; 06-13-2012 at 09:15 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The order does not matter if you are explicit, but if you use any shortcut then it should be first. However it is really bad practice to use both a shortcut and the explicit narrow scope properties in the same rule.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ya I was testing something and wasn't sure if I wanted to keep the fixed property so I made it separate for the time being. Thanks for the clarification. I also noticed the link states have to be in a certain order as well.

  • #5
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The link states are a different case. CSS rules are applied in listing order so if more than one state applies the last one is used when the declaration types have equal priority.

    Some developers will play with the order to get different effects. Some prefer to always show visited links and will put visited after hover, while others put the hover after visited because they always want the hover no matter whether the site has been visited or not.

    The best way to go is just test as you go... sometimes a "mistake" will yield an effect you like, but you might miss it if you do dozens of changes between tests.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The only reason link states need to be in a specific order is because some states are included in other states and so the more specific one needs to come after the ones that include it.

    All links satisfy :link regardless of any other state so it must come first or it will override all the others.

    A :visited link is one that has been previously visited even if it now has the focus or has the mouse hovering over it so it must come second or it will override the others.

    For a link to be :active it must either have the mouse over it and so satisfy :hover (since it is made active by depressing a mouse button while the mouse is over the link) or it must have the :focus (as the other way to make a link active is to depress the enter key while it has the focus). So :active must come last.

    The order of :hover and :focus doesn't matter except that whichever you put second will be the one to apply if both apply to the same element at the same time.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by resin View Post
    Ya I was testing something and wasn't sure if I wanted to keep the fixed property so I made it separate for the time being. Thanks for the clarification. I also noticed the link states have to be in a certain order as well.
    In addition, you can either add separate specific properties or a single property with multiple values.

    Code:
    #blah
    {
    border-color: red; border-style: double; border-size: 5px;
    }
    /* or */
    #blah
    {
    border: red double 5px;
    }
    I am sure they work as well.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    question about a:FOCUS and a:TARGET

    Hope I"m not off point, but I've been wondering where new :FOCUS and :TARGET pseudo classes would come in the "LoVeHA" scheme. I figure keyboard (tab) activated :FOCUS would be similar to :hover. Is :TARGET for named anchors (like plain anchor A)? Or what?

    I always include and start off with plain anchor A { text-decoration: none: } because styles are inherited from and between states.

    As far as "order of properties" goes, there seems to be no ONE formula so I try to check individual references property-by-property.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    The :target pseudo class has nothing to do with anchors themselves, it’s the element to which an internal anchor links (i. e. the element that is the target of the link) and applies to the element after that internal link has been clicked.
    Code:
    <a href="#example">Link</a>
    <div id="example">Target</div>
    --------
    div:target {background: red;}
    Furthermore, the anchor pseudoclasses are just like regular classes and can also be combined as such:
    Code:
    a {…} /* applies to all anchor elements */
    a:link {…} /* only applies to anchor elements that are (unvisited) links (i. e. that have an href attribute) */
    a:hover {…}
    a:visited:hover {…} /* overrides hover styles for visited links only */
    a:link:hover {…} /* only applies to anchors that are unvisited links */
    a:visited:focus {…} /* overrides focus styles for visited links only */
    a:visited:active {…} /* overrides active styles for visited links only */
    An anchor gains focus when you use the tab key to switch between links and/or form controls or when you click the link (as long as the mouse button is down, the :active pseudo class is triggered and overriding :focus, though).

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice post thanks for the share and the information


  •  

    Posting Permissions

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