I have the following :first-child pseudo-class
#content {
width:675px;
padding: 30px 0 60px;
float: left;
overflow: visible;
background: url(../images/content.png)
}
#content p {
margin: 0 15px;
}
#content p:first-child {
margin: 15px;
}
but I don’t get the bottom margin as expected? I didn’t declare any other paragraph, except for the one in the reset.
Tested in IE 8 & 9, FF and Opera
Hi Paul.
I have no Idea why it suddeny isn’t working for me any longer, It always did. The strange thing is I’m middle in of a hectic period and someone asked me to translate a photoshop fie into CSS/HTM and have to be finished tomorrow. I tried it there as well and again nothing? Here are the entire CSS and HTML. Maybe you see where i’m going wrong.
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
margin: 0; padding: 0;
}
ul, ol, li {
list-style-type: none;
}
img,fieldset {
border: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 130%;
color: #603745;
}
.bg {
min-width: 1280px;
min-height: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#wrapper {
width: 1132px;
margin: 0 auto;
margin-top: 80px;
overflow: hidden;
background: #FFF;
font-size: .8em;
}
/************ Sidebar ************/
#sidebar {
width: 224px;
margin: 6px;
float: left;
display: inline;
overflow: hidden;
}
/************ Logo ************/
#sidebar .logo {
width: 224px;
height: 178px;
background: #89014D;
}
#sidebar .logo a {
width: 212px;
height: 178px;
margin-left: 6px;
display: block;
position: absolute;
background: url(../images/logo.png) no-repeat;
text-indent: -999em;
}
/************ Menu ************/
#sidebar .menu {
width: 224px;
height: 292px;
margin: 6px 0;
background: #5D0628;
}
/************ Packages ************/
#sidebar .packages {
width: 224px;
height: 236px;
background: #603745;
}
#sidebar .packages img {
width: 224px;
height: 150px;
margin-bottom: 23px;
}
.packages a {
width: 190px;
height: 40px;
margin-left: 17px;
display: block;
background: url(../images/btnPackages.png) no-repeat;
text-indent: -999em;
}
/************ Content ************/
#content {
width: 890px;
margin: 6px 0;
float: left;
overflow: hidden;
}
/************ Top Menu ************/
.topmenu {
width: 890px;
height: 50px;
}
.topmenu li {
margin-right: 6px;
float: left;
position: relative;
}
.topmenu li.last {
margin-right: 0;
margin-left: 1px;
float: left;
position: relative;
}
.topmenu a {
width: 173px;
height: 50px;
display: block;
text-decoration: none;
text-indent: -999em;
}
.topmenu a.home {
background: url(../images/btnHome.png) 0 0 no-repeat;
}
.topmenu a.booking {
background: url(../images/btnBooking.png) 0 0 no-repeat;
}
.topmenu a.rooms {
background: url(../images/btnRooms.png) 0 0 no-repeat;
}
.topmenu a.activities {
background: url(../images/btnActivities.png) 0 0 no-repeat;
}
.topmenu a.contact {
background: url(../images/btnContact.png) 0 0 no-repeat;
}
.topmenu a:active,
.topmenu a:focus,
.topmenu a:hover {
background-position: 0 -50px;
}
/************ Slide Show ************/
#slideshow {
width: 890px;
height: 420px;
margin: 6px 0;
position: relative;
overflow: hidden;
}
#slideshow img {
position: absolute;
top: 0; left: 0;
z-index: 8;
}
#slideshow img.active {
z-index: 10;
}
#slideshow img.last-active {
z-index:9;
}
.home-header{
background: url(../images/home01.jpg)
}
/************ Avalability ************/
.availability {
width: 225px;
height: 236px;
margin-right: 6px;
float: left;
display: inline;
background: #9C9674;
}
.availability a {
width: 198px;
height: 160px;
margin: 38px 0 0 13px;
display: block;
background: url(../images/availability.png) no-repeat;
text-indent: -999em;
}
/************ Main Text ************/
.main-text {
width: 659px;
height: 236px;
float: left;
background: #C5C0A5;
}
.main-text h1 {
padding: 15px 15px;
font-size: 110%;
}
.main-text p {
margin: 0 15px;
}
.main-text p:first-child {
margin-bottom: 15px;
}
<!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>My Hotel Greece | Nafplion Greece | Luxury Hotel Rooms</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen" />
<!-- // CSS -->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<!-- Logo -->
<div class="logo"><a href="#" title="My Hotel Greece">My Hotel Greece Homepage</a></div>
<!-- Menu -->
<div class="menu">
</div>
<!-- // Menu -->
<!-- Packages -->
<div class="packages">
<img src="images/packages.jpg" alt="My Hotel Greece. Special Packages!" title="My Hotel Greece. Special Packages!" />
<a href="#" title="My Hotel Greece. Special Packages!">My Hotel Greece, Special Packages</a>
</div>
<!--// Packages -->
</div>
<!-- // Sidebar -->
<!-- Content -->
<div id="content">
<!-- Top Menu -->
<div class="topmenu">
<ul>
<li><a href="#" class="home" title="My Hotel Greece Hompage">Homepage</a></li>
<li><a href="#" class="booking" title="My Hotel Greece. Online Booking">Online Booking</a></li>
<li><a href="#" class="rooms" title="My Hotel Greece. Rooms and facilities">Rooms</a></li>
<li><a href="#" class="activities" title="My Hotel Greece activities">Activities</a></li>
<li class="last"><a href="#" class="contact" title="My Hotel Greece. Contact Page">Contact</a></li>
</ul>
</div>
<!-- // Top Menu -->
<!-- Slide Show -->
<div id="slideshow">
<img src="images/home02.jpg" width="890" height="420" alt="My Greece Hotel. Nafplion, Greece" />
<img src="images/home01.jpg" width="890" height="420" alt="My Greece Hotel. Nafplion, Greece" />
</div>
<!-- // Slide Show -->
<!-- Avalability Banner -->
<div class="availability">
<a href="#" title="Check Availabiity">Check Availabiity</a>
</div>
<!-- //Avalability Banner -->
<!-- Main Text Area -->
<div class="main-text">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec sapien lacus, vel tempus metus. Nam a urna vel nunc lobortis pellentesque. In ligula nunc, vehicula gravida cursus at, dapibus et lacus.</p>
<p>Etiam aliquam tincidunt sagittis. Curabitur eget dictum justo. Ut arcu dolor, viverra at rutrum id, porttitor sit amet justo. Proin sem sapien, hendrerit eget mattis sit amet, dapibus ut velit. Aliquam mattis bibendum arcu vitae laoreet. Proin quis quam turpis.</p>
</div>
<!-- // Main Text Area -->
</div>
<!-- // Content -->
</div>
<!-- // Wrapper -->
<!-- Background Image -->
<div>
<img class="bg" src="images/body.jpg" alt="My Hotel Greec" />
</div>
<!-- // Background Image -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jsCalls.js"></script>
</body>
</html>
I went over it many times, but can’t figure why it isn’t working.
Thank you in advance
Seems to be working for me:
<!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>
#content {
width:675px;
padding: 30px 0 60px;
float: left;
overflow: visible;
background: url(../images/content.png)
}
#content p {
margin: 0 15px;
border:1px solid red;
}
#content p:first-child {
margin: 15px;
}
</style>
</head>
<body>
<div id="content">
<p>this is the first paragraph with a 15px top and bottom margin</p>
<p>this is more text</p>
<p>this is the text</p>
</div>
</body>
</html>
The first paragraph has a margin top and bottom as expected.
Paul. You’re a hero. New things learned again
Hi,
The problem is that the p element is not the first child. The h1 is the first child so your rule will never match. The p element will only be styled when it is the first child (it doesn’t mean the first p element).
You could get to the first p element in your structure like this:
.main-text h1 + p{ margin-bottom: 15px;}
Or for more advanced browsers (not less than ie9) like so:
.main-text p:nth-of-type(1) {
margin-bottom: 15px;
}