First child selector css probleem
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!-- 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>
Were 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 -->
<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>
Were 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 -->
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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;
}
.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;
}
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.
Maar met de first-of-type gaat het beter:
kijk hier maar eens naar dit voorbeeld
Frank
Ik heb meerdere row classes nu. Wat ik nu wil is 1 specifieke class aanroepen, alleen eentje heb ik het volgende genoemd:
Code (php)
1
<div class="grid_12 row"></div>
Hoe moet ik deze in mijn css aanroepen. Dat moest toch gewoon zoals dit:
Code (php)
1
.grid_12 row { }
Code (php)
1
.grid_12
Als je de combinatie grid_12 en row wilt:
Code (php)
1
.grid_12.row
Zie: http://jsfiddle.net/HwaUt/
Wist ik zelf ook niet hoor.
Dus als beide MOETEN: chainen (aan elkaar zonder spaties)!
Gewijzigd op 29/09/2012 20:43:09 door Eddy E