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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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