Question regarding CSS selectors

Does anyone here actually use the css3 syntax?

.box > p

For selecting a specific element you can do a few things. Old school way would be to add a class to it and select it by that.

if it's all the same tags inside the parent for example:

<div>
  <p>gregertg</p>
  <p>gertgertgert</p>
  <p>gertgertger</p>
</div>

Code (markup):

You could do div p:nth-child(2).

You can always grab the first and last like this:

div p:first-child, div p:last-child

or odd's and evens

div p:nth-child(even), div p:nth-child(odd)

if its a mix of tags you can use nth-of-type

<div>
  <blockquote>gregertg</blockquote>
  <p>gertgertgert</p>
  <p>gertgertger</p>
</div>

Code (markup):

div p:nth-of-type(2)

You can pretty much get whatever you want with nth-child and nth-of-type.

div p:nth-child(3n+1)

would select every third p tag starting from the first (1,4,7,...) that'll also work with nth-of-type.


I really which there was a way to select the previous element. Something like

p - h3 would be awesome. I can't remember any examples but i know i've ran into that problem several times

 

You could experiment with `:nth-last-child` and `:nth-last-of-type` although it probably has little use in real world situations.

 

Thanks for that. I haven't read about this selecting method yet. I'll learn read about it.

 

I'm still using it with an eyedropper, usually only once inside media queries as I'm still supporting a lot of users on browsers that still don't support CSS3. At least once you're inside a media query you know it's available... but the fancy selectors are still not "real world deployable" for the user bases I'm stuck dealing with outside of the media query.

I'm also somewhat of the opinion if you NEED to do something like that on a tag like paragraph, you're probably doing something WRONG with your paragraphs. There are tags I could see legitimate reasons to do that with - LI, TH, TD, DD -- but tags like P? If it's a grammatical paragraph there is no reason for it to be styled different than other grammatical paragraphs unless it's in some tag that changes it's meaning (like blockquote) or the content itself is receiving style for a reason (emphasis).

Admittedly, that sound writing practice means not a damned things to the quacks, morons, and fools coming at it from a graphics art perspective who want to change colours and faces, weight and styles willy-nilly because "ooh flashy" -- again because they could give a flying purple fish if it's actually useful to visitors to the site.

 

I am guessing this is must be also the reason for using classes like ".first" on your own site (see "h2.first") instead of something like h2:first-of-type. Is this correct?

 

Yup. I'm about minimalism in the markup, but I'm also about compatibility... as a rule of thumb I still just don't trust these new selectors.

Of course given the bullshit they're doing to the markup specification, I'm about ****ing DONE with the W3C.

 

Well... things like :first-of-type all gracefully degrade - if you're using a browser made more than 5 years ago, or some retarded, old defunct piece of crap hardware that doesn't support anything newer than IE7, then yeah, it won't work, but it won't break anything - the user just won't get the different styling. Buh-hoo.