Results 1 to 7 of 7

Thread: Precedent of class or id as parent in descendant selectors

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,183
    Thanks
    74
    Thanked 3,380 Times in 3,341 Posts
    Blog Entries
    12

    Default Precedent of class or id as parent in descendant selectors

    Wow, that was a mouthful, and I'm not even sure I phrased that correctly for what I'm asking. An example would probably be more clear. Say I have a div:

    HTML Code:
    <div id="slider" class="full">bunch of stuff here, including other elements like divs and img elements</div>
    So now, in the stylesheet, which has precedent? Is it:

    #slider

    or

    .full

    or just whichever comes later in the stylesheet?

    Further, if I want to - say control the css a contained div which is the first div child of the above div code, which has precedence? Is it:

    #slider > div

    or:

    .full > div

    or just whichever comes later in the stylesheet?

    I'll probably have to experiment to see for certain, may even vary with some browser(s). In my experience I believe class has precedence, though one might easily assume id would. It's more unique.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,183
    Thanks
    74
    Thanked 3,380 Times in 3,341 Posts
    Blog Entries
    12

    Default

    Looks like it is id:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #slider > div {background: red;}
    .full > div {background: black;}
    </style>
    </head>
    <body>
    <div id="slider" class="full"><div>Hello World!</div></div>
    </body>
    </html>
    The bg is red.

    But both together are king:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #slider.full > div {background: black;}
    #slider > div {background: red;}
    </style>
    </head>
    <body>
    <div id="slider" class="full"><div>Hello World!</div></div>
    </body>
    </html>
    bg is black.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,029
    Thanks
    25
    Thanked 598 Times in 574 Posts
    Blog Entries
    40

    Default

    Hi John,

    An id always trumps a class (or multiple chained classes) as a CSS selector. It comes down to specificity, with different selectors having more "weight" than others. There's a point system that calculates which selectors (or combinations of selectors) have the highest value, but generally the order comes down to (from highest to lowest);

    - inline style attribute
    - id
    - class, pseudo-class, attribute
    - element

    The universal selector (*) has no weight. And the !important override, while not a selector, out-weighs everything! (even inline attribute styles)

    There's a great explanation for everything here https://css-tricks.com/specifics-on-css-specificity/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following 3 Users Say Thank You to Beverleyh For This Useful Post:

    jscheuer1 (04-16-2017),keyboard (04-16-2017),molendijk (04-15-2017)

  5. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    And js always wins (except when css has !important to prevent this). So the background is yellow in:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #slider > div {background: red;}
    </style>
    </head>
    <body>
    <div id="slider"><div>Hello World!</div></div>
    <script>document.getElementById('slider').childNodes[0].style.background='yellow'</script>
    </body>
    </html>
    EDIT:
    And this is not because the javascript comes last, since the background is also yellow in:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>document.write('<div id="slider"><div>Hello World!<\/div><\/div>')</script>
    <script>document.getElementById('slider').childNodes[0].style.background='yellow'</script>
    <style type="text/css">
    #slider > div {background: red;}
    </style>
    </head>
    <body>
    </body>
    </html>
    Last edited by molendijk; 04-15-2017 at 11:17 PM.

  6. The Following 2 Users Say Thank You to molendijk For This Useful Post:

    jscheuer1 (04-16-2017),keyboard (04-16-2017)

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,183
    Thanks
    74
    Thanked 3,380 Times in 3,341 Posts
    Blog Entries
    12

    Default

    Right Arie. But I'm trying to write/leave as much to the stylesheet as possible as I go along here apropos to our previous discussion about slideshows as regards the new one I'm putting together. Not finished, but you can see a working demo here:

    http://jscheuer1.com/garden/images/cssassist3f.htm

    May be updated.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (04-16-2017)

  9. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,718
    Thanks
    46
    Thanked 211 Times in 204 Posts
    Blog Entries
    51

    Default

    Thanks John, the slider looks very nice.
    I noticed that at about 700px width and less the images are too much cropped due to background-size: cover. So it might be a good idea to add something like:
    Code:
    @media screen and (max-width: 700px)  {
    #slider.full > div > div, #slider.full > div > a > div {background-size: contain; background-repeat: no-repeat; background-color: black}
    }
    Just an idea.

  10. The Following User Says Thank You to molendijk For This Useful Post:

    jscheuer1 (04-17-2017)

  11. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,183
    Thanks
    74
    Thanked 3,380 Times in 3,341 Posts
    Blog Entries
    12

    Default

    That's a good idea. I think I may leave that for customization on the designer's part, or include it and note it as "configurable", because that would likely change depending upon the images. There really is no problem with cropping if you toggle out of full screen mode in that example. There's still a lot more I want to do with this code (have already moved on to beta 3fa, which will have more changes and probably later versions before its alpha) before making it officially available, though I have no problem with folks using it as is for now and/or playing with it to see what it can do/be modded for, as long as the credit remains.

    Edit: Decided to include a version of that:

    Code:
    @media screen and (max-width: 700px) { /* optional and configurable */
    	#slider.full > div > div, #slider.full > div > a > div {
    		background-size: contain;
    		background-repeat: no-repeat;
    		background-color: #fff;
    	}
    	#slider.fullScreen > div > div, #slider.fullScreen > div > a > div {
    		background-color: #666;
    	}
    }
    Which necessitated adding the highlighted:

    Code:
    #slider .descwrap {
    	border: 0 solid #aaa; /* optional decorations */
    	border-radius: 0 0 25px 25px; /* optional decorations */
    	position: absolute; /* required */
    	bottom: 0.5ex; /* required */
    	transition: height 1s; /* required for animation the s is seconds, adjust for longer or shorter animation of descriptions, decimals allowed */
    	width: 100%; /* required */
    	overflow: hidden; /* required */
    	background: transparent !important; /* recommended */
    }


    Edit: Now that I've seen it both ways, I'm thinking it might be better to leave it out and let the user shorten the window (or on mobile, switch to landscape) to compensate. Seems to merit mention in the documentation though, not quite to that stage yet.
    Last edited by jscheuer1; 04-17-2017 at 03:57 PM. Reason: tried it
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. need help with children selectors
    By tops in forum Looking for such a script or service
    Replies: 4
    Last Post: 04-01-2016, 07:04 AM
  2. Replies: 2
    Last Post: 01-23-2010, 12:25 AM
  3. Replies: 2
    Last Post: 10-09-2009, 04:19 PM
  4. Resolved Need help with advanced CSS selectors
    By C55inator in forum CSS
    Replies: 2
    Last Post: 06-29-2009, 05:04 PM
  5. non inherited selectors
    By altein in forum CSS
    Replies: 1
    Last Post: 02-18-2008, 01:07 PM

Bookmarks

Posting Permissions

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