Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daryl Burrows
Daryl Burrows
2,564 Points

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

Kyle Chadha
Kyle Chadha
2,257 Points
Kyle Chadha
Kyle Chadha
2,257 Points

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

Daryl Burrows
Daryl Burrows
2,564 Points

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; }

Kyle Chadha
Kyle Chadha
2,257 Points
Kyle Chadha
Kyle Chadha
2,257 Points

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

Daryl Burrows
Daryl Burrows
2,564 Points

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/

Kyle Chadha
Kyle Chadha
2,257 Points

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?

Daryl Burrows
Daryl Burrows
2,564 Points

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 :)