Beste allemaal,

Ik ben bezig met coderen van een website en heb 2 rows. ik wil van de eerste geen padding, wel voor de rest van de sections met de class "row".

Om dit te bereiken heb ik de css3 selector :first-child {} nodig. Maar ik zie geen resultaat. Waar kan dit aan liggen? Hieronder de code + css


<!-- Start container website -->
<div class="container_12">
	<header class="grid_12 header-top">
    	<a href="#" id="logo"><img src="images/logo.png" alt="DesignStyle Logo" /></a>

        <nav id="primary-navwrapper">
            <ul id="listnav">
                <li><a href="index.html" id="current">Home</a></li>
                <li><a href="pages/portfolio.html">Portfolio</a></li>
                <li><a href="pages/blog.html">Blog</a></li>
                <li><a href="pages/service.html">Service</a></li>
                <li><a href="pages/designstyle.html">DesignStyle</a></li>
                <li><a href="pages/contact.php">Contact</a></li>
            </ul>
        </nav>
        
    </header>
    
    <section class="grid_12 row">
        <h2 id="message">
            Hello! Welcome to the showcase of graphic and web designer / developer Casper Biemans.
            <br>
            We’re DesignStyle, a creative agency based in the Netherlands.
        </h2><!-- End #message h2 -->
    
    
    	<div class="sliderbox">
        	<img src="images/slides/designstyle-2.jpg" alt="DesignStyle" />
        </div><!-- End .sliderbox -->

    </section><!-- End section.grid_12 row -->
    
	<section class="row">
        <ul class="featuredbox">
            <li class="grid_4">
                <h3>What we do</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique
                bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                <br>
                <br>
                Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus, fermentum aliquam 
                ante ipsum ut purus.
                </p>
            </li><!-- End li.grid_4 -->
            
            <li class="grid_4">
                <h3>About</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. 
                Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                <br>
                <br>
                Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus, 
                fermentum aliquam ante ipsum ut purus.
                </p>
            </li><!-- End li.grid_4 -->
            
            <li class="grid_4">
                <h3>Contact</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. 
                Donec tristique bibendum vulputate. Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                <br>
                <br>
                Vestibulum tincidunt gravida lacinia. Nulla facilisi. Suspendisse ullamcorper, est eget dignissim tempor, eros magna lacinia risus, 
                fermentum aliquam ante ipsum ut purus.
                </p>
            </li><!-- End li.grid_4 -->
        </ul><!-- End ul -->

    </section><!-- End section.row -->
</div><!-- End .container -->



/* Setup rows */
.row {
	width: 100%; /* Width of #container */
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	float: left;
	border: 10px solid #333;
}
.row:first-child {
	width: 100%; /* Width of #container */
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	float: left;
}

first-child kijkt naar het eerste kind in .row
Dus als je de eerste <li> in .row wilt pakken oid


Jij wilt iets anders: :nth-of-type(1)

Zie http://jsfiddle.net/PVRZ3/

Kleurtje rood is ter verduidelijking.
Casper ik had hier ook problemen mee.
Maar met de first-of-type gaat het beter:

kijk hier maar eens naar dit voorbeeld

Frank
Thnkx Eddy en Frank! Het werkt, al heb ik nu het volgende.

Ik heb meerdere row classes nu. Wat ik nu wil is 1 specifieke class aanroepen, alleen eentje heb ik het volgende genoemd:


<div class="grid_12 row"></div>



Hoe moet ik deze in mijn css aanroepen. Dat moest toch gewoon zoals dit:


.grid_12 row { }
Als de class specifiek is...

.grid_12


Als je de combinatie grid_12 en row wilt:

.grid_12.row



Zie: http://jsfiddle.net/HwaUt/

Wist ik zelf ook niet hoor.
Dus als beide MOETEN: chainen (aan elkaar zonder spaties)!

Reageren