SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :first-child pseudo-class isn't working

    I have the following :first-child pseudo-class
    Code CSS:
    #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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Seems to be working for me:

    Code:
    <!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.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code CSS:
     
    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;	
    }

    Code HTML4Strict:
    <!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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .main-text h1 + p{ margin-bottom: 15px;}
    Or for more advanced browsers (not less than ie9) like so:

    Code:
    .main-text  p:nth-of-type(1) {
        margin-bottom: 15px;  
    }

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul. You're a hero. New things learned again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •