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:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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