Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

general sibling selector help please!

I'm creating a one page website with transitions to show/hide content and I am stumped as to a piece of styling... Why do I have to place the Header section at the bottom of the html document (under the content sections) for styling to work when using the general sibling selector to style the current section in the navigation? Its driving me nuts trying to figure it out! - This is the html:

<div id="header">
    <h1>Page Transitions with CSS3</h1>
    <ul id="navigation">
        <li><a id="link-home" href="#home">Home</a></li>
        <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
        <li><a id="link-about" href="#about">About Me</a></li>
        <li><a id="link-contact" href="#contact">Contact</a></li>
    </ul>
</div>

and this is the css:

home:target ~ #header #navigation #link-home,

portfolio:target ~ #header #navigation #link-portfolio,

about:target ~ #header #navigation #link-about,

contact:target ~ #header #navigation #link-contact{

background: #000;
color: #fff;

}

Ive googled it all day with no answers lol

2 Answers

Daryl can you post the full HTML code? Usually when the relative positioning of code in a document is affecting your styling it means something else in the document is trumping your intended styles.

So, in other words -- you style your header with the general sibling selector, but as the browser continues to read the page, something else in it overrides the initial styling. This has to do with the cascade priority: Importance, Specificity, and Source Order.

I'm not sure if this exists -- but if there was a debugger by which you could load the code line by line, then you could pinpoint at what point your intended styling is being overridden.

Cheers,

Kyle

Ok here is the full code, If I move the header navigation section above any of the 4 sections then the styling is not applied to the sections below it, that is why it is sitting at the bottom to be able to style them. I think the problem is to do with the target: pseudo class and general sibling selector but I dont understand why and I would really like too!

    <!-- Home -->
    <div id="home" class="content">
        <h2>Home</h2>
        <p>Some Content</p>
    </div>
    <!-- end Home -->

    <!-- Portfolio -->
    <div id="portfolio" class="panel">
        <div class="content">
            <h2>Portfolio</h2>
            <p>Some Content</p>
        </div>
    </div>
    <!-- end Portfolio -->

    <!-- About -->
    <div id="about" class="panel">
        <div class="content">
            <h2>About</h2>
            <p>Some Content</p>
        </div>
    </div>
    <!-- end About -->

    <!-- Contact -->
    <div id="contact" class="panel">
        <div class="content">
            <h2>Contact</h2>
            <p>Some Content</p>
        </div>
    </div>
    <!-- end Contact -->

      <!-- Header with Navigation -->
    <div id="header">
        <h1>Welcome to Daryl's Website</h1>
        <ul id="navigation">
            <li><a id="link-home" href="#home">Home</a></li>
            <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
            <li><a id="link-about" href="#about">About</a></li>
            <li><a id="link-contact" href="#contact">Contact</a></li>
        </ul>
    </div>

</body>

html{ height: 100%; }

body{ font-family: 'Electrolize', Arial, sans-serif; font-weight: 400; font-size: 15px; color: #fff; background-color: #ffcb00; width: 100%; }

a{ text-decoration: none; }

header{

position:absolute;
z-index: 2000;
width: 235px;
top: 50px;

}

header h1{

font-size: 30px;
font-weight: 400;
text-transform: uppercase;
line-height: 120%;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;

}

navigation {

margin-top: 20px;
width: 235px;
display: block;
list-style: none;
z-index: 3;
margin:20px 0px;

}

navigation a {

color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;

}

navigation a:hover {

background: #ddd;

}

.panel { min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2;

-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;

}

.panel:target{ margin-top: 0%; background-color: #ffcb00; }

.content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; margin-bottom: 25px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; }

home:target ~ #header #navigation #link-home,

portfolio:target ~ #header #navigation #link-portfolio,

about:target ~ #header #navigation #link-about,

contact:target ~ #header #navigation #link-contact

{ background: #000; color: #fff; }

Hrmm having a bit of trouble understanding what you're describing. What styling specifically do you see changing when you rearrange your sections?

In any case -- unless it's getting manipulated when you're posting in the forum, your syntax also seems like it's off. Check this site for proper syntax when using child / sibling selectors. http://www.w3schools.com/cssref/css_selectors.asp

thanks but if you could take a look at this tutorial and explain to me why he said this - "The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently." I would be very happy!

tutorial in question - http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/

Hrmm sorry Daryl -- I took a look at it but I'm not sure. Still learning myself. Perhaps if you ask this question on stackoverflow (http://stackoverflow.com/) you'll have better luck?

Its ok dude, thanks for your help, Ive posted on stack overflow as per your suggestion. Again thanks for taking the time to help, I appreciate it :)