Grow your CSS skills. Land your dream job.

Pseudo Class Selector

Last updated on:

Browser Support

Chrome Safari Firefox Opera IE Android iOS
TBD TBD TBD TBD TBD TBD TBD

Comments

  1. paul Laman
    Permalink to comment#

    Chris,

    I’m having an awful time with pseudo selectors. I would like to setup my site and prepare it for wordpress (custom Theme) as I’m cutting up the PSD to prepare it. I got most of the stuff fixed but I would like to add the pseudo selector for p:first-letter{}

    however, they is a possibility of multiple paragraphs posting through wordpress. This means that every paragraph will have the dropcap. I only want the first letter of the first paragraph to be drop capped. Herein lies the problem. The p:first-letter{} works in html markup but I cannot get your solution for p:nth-child():first-letter{} to work.
    Possible conclusions I came up with:
    1. Working locally on a virtual server(similar to WAMP or MAMP)
    2. I am doing something wrong with the selector.

    Could you shed some light on this?

    Note I get an error when I type the parenthesis for nth-child. This might give you an indication on what I might be doing wrong. Please advise.

    Also, I want to avoid using span tags for markup as it will make things icky with wordpress and possible design changes later on.

    Thanks for your expedited response in advance.

    P.

  2. paul Laman
    Permalink to comment#

    Chris,

    I’m having an awful time with pseudo selectors. I would like to setup my site and prepare it for wordpress (custom Theme) as I’m cutting up the PSD to prepare it. I got most of the stuff fixed but I would like to add the pseudo selector for p:first-letter{}

    however, thereis a possibility of multiple paragraphs posting through wordpress. This means that every paragraph will have the dropcap. I only want the first letter of the first paragraph to be drop capped. Herein lies the problem. The p:first-letter{} works in html markup but I cannot get your solution for p:nth-child():first-letter{} to work.
    Possible conclusions I came up with:
    1. Working locally on a virtual server(similar to WAMP or MAMP)
    2. I am doing something wrong with the selector.

    Could you shed some light on this?

    Note I get an error when I type the parenthesis for nth-child. This might give you an indication on what I might be doing wrong. Please advise.

    Also, I want to avoid using span tags for markup as it will make things icky with wordpress and possible design changes later on.

    Thanks for your expedited response in advance.

    P.

  3. Try first-of-type mate, the p tag might not be the first child of your container.

    i.e:

    content .post p:first-of-type:first-letter {

    Your styles here…
    }

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".