Pseudo Class first three li's

donboe · March 14, 2011, 10:11pm

noonnope:

I’m lost now. You said the first three, now you say every other 3rd li.

A picture would look better, but I’d say a li(#n mod 3 = 0#) class=“noRightMargin” is all you need:
#content .gallery li {
    width: 191px;
    height: 152px;
    margin: 15px 10px 0 0;
    float: left;
    background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;   
}
#content .gallery .noRightMargin {
    margin-right: 0;
}
For every other 3rd li you apply a margin right 0, and you do that by adding the class noRightMargin for li’s that have 0 as the remainder of the division between their index and 3.

You should not be lost! Like I said The first three need a different top margin. the third <li> of every row has no right margin (which I solved with my server side scripting) which is working fine the way I have it.

I have it solved by giving the <ul> the negative top margin needed, but I really would like to know how to target those three first <li’s> in the structure given!

system · March 14, 2011, 10:16pm

What first three?

You have “the first three” repeating in the “second first three”. A picture would shed most light on this matter.

donboe · March 14, 2011, 10:37pm

I hear what you say The first row (1, 2, 0) or the top row in other words. I don’t want the 15px top margin to be applied to the first row

system · March 14, 2011, 10:47pm


<ul class="gallery">
    <cfloop query="getEventgallery">

    row = currentRow mod 3

    if currentRow <=3 then
      modStyle = row
    endif
     
    if (currentRow >3) and (row != 0) then
      modStyle = ''
    else
      modStyle = row
    endif

            <li class="gal#modStyle#"><a href="#link#" rel="prettyPhoto" title="#description#"><img src="event_gallery/#photo#" alt="#description#" /></a></li>
    <cfif modStyle eq 0></cfif> 
  </cfloop>
</ul>


<ul class="gallery">
   
            <li class="gal1"><a href="http://www.youtube.com/watch?v=GYEDpUpBock" rel="prettyPhoto" title="Drambuie Event Thessaloniki"><img src="event_gallery/drambuie_thessaloniki.jpg" alt="Drambuie Event Thessaloniki" /></a></li>
   
            <li class="gal2"><a href="http://www.youtube.com/watch?v=2lGVRbGSvo4" rel="prettyPhoto" title="Drambui Event Athens"><img src="event_gallery/drambuie_athens.jpg" alt="Drambui Event Athens" /></a></li>
   
            <li class="gal0"><a href="http://www.youtube.com/watch?v=aWptAShzKSU" rel="prettyPhoto" title="Bacardi Event Athens"><img src="event_gallery/bacardi_athens.jpg" alt="Bacardi Event Athens" /></a></li>
   
            <li><a href="http://www.youtube.com/watch?v=1JlFBnQTY7s" rel="prettyPhoto" title="Bombay Sapphire Event Athens"><img src="event_gallery/bombay_sapphire_athens.jpg" alt="Bombay Sapphire Event Athens" /></a></li>
   
            <li><a href="http://www.youtube.com/watch?v=meN32koefY0" rel="prettyPhoto" title="Bombay Sapphire Event Thessaloniki"><img src="event_gallery/bombay_sapphire_thessaloniki.jpg" alt="Bombay Sapphire Event Thessaloniki" /></a></li>
   
            <li class="gal0"><a href="http://www.youtube.com/watch?v=vVBQjwq0yDk" rel="prettyPhoto" title="In a Sentimental Mood"><img src="event_gallery/in_a_sentimental_mood.jpg" alt="In a Sentimental Mood" /></a></li>

            <li><a href="http://www.youtube.com/watch?v=1JlFBnQTY7s" rel="prettyPhoto" title="Bombay Sapphire Event Athens"><img src="event_gallery/bombay_sapphire_athens.jpg" alt="Bombay Sapphire Event Athens" /></a></li>
   
            <li><a href="http://www.youtube.com/watch?v=meN32koefY0" rel="prettyPhoto" title="Bombay Sapphire Event Thessaloniki"><img src="event_gallery/bombay_sapphire_thessaloniki.jpg" alt="Bombay Sapphire Event Thessaloniki" /></a></li>
   
            <li class="gal0"><a href="http://www.youtube.com/watch?v=vVBQjwq0yDk" rel="prettyPhoto" title="In a Sentimental Mood"><img src="event_gallery/in_a_sentimental_mood.jpg" alt="In a Sentimental Mood" /></a></li>  
 
</ul>


#content .gallery li {
    width: 191px;
    height: 152px;
    margin: 15px 10px 0 0;
    float: left;
    background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;   
}

#content .gallery .gal1,
#content .gallery .gal2 {
    margin-top: 0;
}

#content .gallery .gal0 {
    margin-right: 0;
}

donboe · March 15, 2011, 6:47pm

I keep struggling with these Pseudo classes:

This is what I have in my CSS:


.content p {
	margin: 15px 0 0;
	font-size: 90%;
}

.content p.first {
	margin-top: 0;
	font-size: 110%;
}

and this is the html:


<div class="content">
<img class="yiannis" src="http://www.sitepoint.com/forums/images/site/photos/yiannis.jpg" alt="" />
<p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
<p>His magical hands have transformed a range of known and unknown...</p>
<p>Yiannis was born a hairdresser and was......</p>
<p>With his weapons... </p>
<p>Yiannis Tsapatori now lives and works in New York.</p>
</div>

Note again: the content is coming from the database! what you see as html is what I took from the uploaded page. Nether the top-margin or the font-size is changing?

Edit: I tried .content p:first-child, .content img p.first and .content img p:first-child as well

PaulOB · March 15, 2011, 7:40pm

Hi,

p.first is a class of .first attached to the p element and not a pseudo class. You don’t have an element with a class of .first so it will never be matched anyway

Here is an example that clearly shows first-child working in IE7 and above:


<!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 type="text/css">
.content{
    background:red;
    padding:1px 0;
}
.content p {
    margin: 15px 0 0;
    font-size: 90%;
}
.content p:first-child {
    margin-top: 0;
    font-size: 110%;
}
</style>
</head>
<body>
<div class="content"> 
    <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
    <p>His magical hands have transformed a range of known and unknown...</p>
    <p>Yiannis was born a hairdresser and was......</p>
    <p>With his weapons... </p>
    <p>Yiannis Tsapatori now lives and works in New York.</p>
</div>
</body>
</html>

system · March 15, 2011, 8:20pm

Paul bet me to it.

But…

Also, .content p:first-child, means p should be the first child of the parent, and it would require something like this:


<div class="content">
<p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>

and .content img p:first-child something INVALID like this: p to be a child, even more, the first child, of the EMPTY img element.

donboks, you look a little tired and overused on this one. You may not be thinking clearly enough.

Stevie_D · March 15, 2011, 8:55pm

noonnope:

Also, .content p:first-child, means p should be the first child of the parent, and it would require something like this:
<div class="content">
<p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p> 

Another option to consider would be .content p:first-of-type, which matches the first paragraph within an element of class=“content”, even if there are other things (like images) that come before it.

The downside? Yup, you’ve guessed it, our old friend IE
It doesn’t work in IE8 or below. The compat chart doesn’t show IE9 yet so I can’t say whether it will work there. Apart from that, it’s fine and funky in Firefox 3.5, Safari 3.1, Opera 9.5 and Chrome 2.0.

PaulOB · March 15, 2011, 9:18pm

Thanks, I meant to say something about that but got distracted

The other alternative which was mentioned earlier in the thread would be to do this:


<!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 type="text/css">
.content{
    background:red;
    padding:1px 0;
}
.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p + p {
    margin: 15px 0 0;
    font-size: 90%;
}
</style>
</head>
<body>
<div class="content"> 
    <div><img src="img.gif" alt="" width="500" height="10" /></div>
        <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
    <p>His magical hands have transformed a range of known and unknown...</p>
    <p>Yiannis was born a hairdresser and was......</p>
    <p>With his weapons... </p>
    <p>Yiannis Tsapatori now lives and works in New York.</p>
</div>
</body>
</html>

That will work from IE7 and up but does depend on structure being as above.

donboe · March 16, 2011, 5:33am

I have to agree with noonnope

donboks, you look a little tired and overused on this one. You may not be thinking clearly enough.

It was obviously tiredness. I took my oh so needed sleep and everything is working fine now:


.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p + p {
    margin: 15px 0 0;
    font-size: 90%;
}

Thank you all for the patience

@Paul O’B I hope everything went well over the weekend

PaulOB · March 16, 2011, 9:15am

Off Topic:

Yes fine thanks - recovering well now.

system · March 16, 2011, 9:57am

This code


.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p + p {
    margin: 15px 0 0;
    font-size: 90%;
}

bugs me, and it may seem like I’m not consistent, since I advocate the drop of IE6- exactly for this reason: the ability to use selectors like +.

But in this case I believe it’s not a good option, when it comes to fast and efficient. The adjacent sibling selector, I think, it’s not put to a good use in a situation like this.

A class targeting that first p would be far more fitted here:


.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p.firstPar {
    margin: 15px 0 0;
    font-size: 90%;
}

[ot]Good health to you, Paul, it seems you need it!
Have a speedy revovery.[/ot]

PaulOB · March 16, 2011, 11:18am

[ot]Good health to you, Paul, it seems you need it!
Have a speedy revovery.[/ot]

Thanks Μitică

donboe · March 17, 2011, 3:11pm

noonnope:

This code
.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p + p {
    margin: 15px 0 0;
    font-size: 90%;
}
bugs me, and it may seem like I’m not consistent, since I advocate the drop of IE6- exactly for this reason: the ability to use selectors like +.

But in this case I believe it’s not a good option, when it comes to fast and efficient. The adjacent sibling selector, I think, it’s not put to a good use in a situation like this.

A class targeting that first p would be far more fitted here:
.content p {
    margin-top: 0;
    font-size: 110%;
}
.content p.firstPar {
    margin: 15px 0 0;
    font-size: 90%;
}
[ot]Good health to you, Paul, it seems you need it!
Have a speedy revovery.[/ot]

Maybe I misunderstand you than? Because I’m targeting the first <p> right now the way I want it. The first <p> has no top margin and all others(it’s not just one) have a top margin of 15px!

system · March 17, 2011, 5:22pm

I’m the one getting lost. Maybe I need some sleep too.

It should go like this:


.content p {
    margin: 15px 0 0;
    font-size: 90%;
}

.content p.firstPar {
    margin-top: 0;
    font-size: 110%;
}

Using firstPar, a class, means two steps:

Global action: All p in content will have a 15px top margin assigned and a 90% font size.
Single corrective action: Only one p having firstPar class will be given 0 instead of 15px on that top margin, and 110% font size instead of 90%.

Using p+p, adjacent sibling selector, means more steps:

Global action: All p in content will have a 0 top margin assigned and a 110% font size, as opposed to just one p, the one we need.
Repetitive corrective sequence: every p having a sibling p will have its properties modified to: 15px margin top instead of 0, and a 90% font size instead of 110%.

I’m not sure if the browsers actually apply and then correct, like the CSS describes, I suspect not, but it will take longer to decide which property from which selector takes precedence. Milliseconds, or even less, it doesn’t matter. The principle of optimization applies still. I never test it, but it seems like that.

I use + selector in scenarios when there aren’t so many possible matches, in fact, I use it when I’m sure there is but one match, possibly occurring several times though, and in my experience it has to do more with classes than it has to do with the elements.