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 8 of 8
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    Making a child element not part of parent

    Hi, let's say I have a button which I want box-shadow: inset; when :active. However, when the user clicks the <span>text</span> part of the button, I don't want it to have the box-shadow.

    Is there a way to do this in css?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Sammy12,
    Pretty sure CSS cannot make your span affect your button. Sounds like a js thing to me.
    Have you tried anything yet? I'd be interested in looking at your attempts.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    what about removing the shadow effect using :active?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Excavator View Post
    Hello Sammy12,
    Pretty sure CSS cannot make your span affect your button. Sounds like a js thing to me.
    Have you tried anything yet? I'd be interested in looking at your attempts.
    I have absolutely no clue Does someone have a js solution?

    Quote Originally Posted by alykins View Post
    what about removing the shadow effect using :active?
    so the button looks like this: (hypothetical situation)

    Code:
    button {
       padding: 5px;
    }
    button:active {
       box-shadow: inset 0 0 10px 0 #000;
    }
    button span {
       padding: 5px;
    }
    
    <button>
        <span>abcd</span>
    </button>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I guess I'm not sure what you're trying to do. Have you tried just styling an anchor?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 50px 0 300px 50px;
    	background: #999;
    }
    button {padding: 5px;}
    button, button a:visited  {box-shadow: inset 0 0 10px 0 #0f0;}
    button a:hover {box-shadow: inset 0 0 10px 0 #000;}
    button a:active {box-shadow: none;}
    
    </style>
    </head>
    <body>
        <div id="container">
    		<button><a href="">abcd</a></button>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,823
    Thanks
    42
    Thanked 199 Times in 198 Posts
    I guess I am a little lost too- and now that I think about it :active might not work.... are you trying to have the shadow go away as long as the user holds down the button? in that case actually I think :active would not work, but :focus should.... but might need to play with both

    but looking at your code I am getting confused as to what you want to have the shadow-- you essentially want the shadow to appear around the button only and also only when it is pressed correct?

    again in that case I think the toying with the :active and :focus pseudo's might work... the button span {} may need to have further styling to ensure it never gets an inherited border but that would be the same as the code that makes it work, but in reverse for something like button span:active or :focus

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    maybe this will help:

    Code:
    <div id="button">
      <div></div>
      <span>blabla</span>
    </div>
    Code:
    #button {position:absolute;padding:10px;display:inline-block;text-align:center}
    #button div {z-index:1;position:absolute;background-color:red;width:100%;height:100%}
    #button span{background-color:blue;position:relative;z-index:2;left:10px;top:10px;}
    #button div:active {box-shadow: inset 0 0 10px 0 #000;}
    The span element is now not a child of div element, that has the box shadow, but a sibling. So you won't get a shadow when clicking on span.
    It's the only solution i could think of right now but maybe there are better approaches out there...

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    well done

    this actually fits perfectly since I have an opacity underlay, extra div to get that browser support over rgba
    Last edited by Sammy12; 11-20-2011 at 07:04 PM.


  •  

    Posting Permissions

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