CSS 2.1 selectors with example

* selector

* {color: red;}
* is a universal selector, meaning that it selects every single element on the page.
As a result all text on this page should be red.


> selector

body > p {color: red;}

The > selector means “child of”, so that this style sheet should make the text in all P’s that are direct children of BODY red.
It should not make this paragraph red, though. It’s in a div, and therefore not a direct child of the body.


+ selector

h1 + p {color: red;}

The h1 + p selector means when using H1 tag after coming P tag become red color then every tag make noraml.

This paragraph should not be red.


[attr] selector

p[class] {color: #6374AB}
p[ppk] {background-color: red}
p[align=right] {border: 1px solid black;}
p[ppk=false] {font-weight: 600;}
p[class~=test] {text-decoration: underline;}

Attribute presence

p[class] {color: #6374AB}

Each element p with an attribute class—the value of the attribute doesn’t matter.

This paragraph has class="testclass". It should be blue.

p[ppk] {background-color: red}

Each element p with an attribute ppk—the value of the attribute doesn’t matter.

This paragraph has a ppk="true" attribute. It should have a red background.

Attribute value

The p[align=right] selector means “each p that has an ALIGN attribute with value “right”. The p[class~=test] selector means “each p that has a CLASS one of whose values is “test”.

p[align=right] {border: 1px solid black;}Each p with an attribute align="right".

This paragraph has align="center". Nothing should happen.This paragraph has align="right". It should have a border.

p[ppk=false] {font-weight: 700;}Each p with an attribute ppk="false".

This paragraph has a ppk="false" attribute. It should be bold and have a red background.

The previous paragraph with a ppk attribute didn’t have the value "false" so it should not become bold.

p[class~=test] {text-decoration: underline;}

Each p with an attribute class, one of whose values is "test". The values of the attribute should be separated by spaces.

This paragraph has a class="small test" attribute. It should be blue and underlined.

The blue colour comes from the previous rule p[class] {color: #6374AB}, which obviously also works on this paragraph, since it has a class.

Multiple classes

p.italic {color: red;}
p.underline {text-decoration: underline;}
p.large {font-size: 150%;}
p.small {font-size: 90%;}
p.underline.small {font-variant: small-caps;}

Note the last rule: it says "any p that has a class underline AND small". Explorer 6- doesn't read this last rule correctly; it applies it to any paragraph that has a class "small".

This paragraph has class="italic large" It should be red and large.

This paragraph has class="underline large" It should be underlined and large.

This paragraph has class="italic small" It should be red and small.

This paragraph has class="underline small" It should be underlined, small, and it should use small-caps.


58 Comments to “CSS 2.1 selectors with example”

  • Derek November 24, 2013 at 5:14 pm

    It seems like there really hasn’t been a RECENT long standing heavyweight champ in the UFC. Nobody has completely dominated that weight class. In fact, I can’t think of one heavyweight MMA fighter in any fighting association (including K-1 and Strikeforce) who is completely dominant over all other heavyweight fighters right now. There certainly are some very good ones. But there is no one man who dominates that weight division. I wonder why.
    Oops… I said K-1. I meant to say M-1.

  • Lasagna delivery guy November 26, 2013 at 7:52 am

    To what extent can the problems affecting the Roman Republic in the early 1st century BC be attributed to roman victory in the Second Punic War

    I need to do this for the essay but i don’t understand what the question is asking and what i should talk about. Please help 🙂

  • Mistry November 29, 2013 at 7:15 am

    I’m remaking a version of Asteroids for a project and I’m supposed to create a method in my Asteroid class which draws the individual asteroid. The problem is that the asteroid class is not a subclass of Jframe or JPanel so I don’t know how to draw it from this class. I am calling this method from an update() method so I won’t have a graphic to pass it as a parameter. Any ideas?

  • Wooooody November 29, 2013 at 10:58 am

    “She that revived the faintness of the weary one, that took in his seed and provided an heir, that suckled the child in solitude, the place where he was being unknown, that brought him, when his arm was strong, into the hail of Keb”.

    I need to do a close reading of this section for my class and all I can figure out is that Isis is a protector of her brother.

    Anything will help!

  • everydayGuitarist November 30, 2013 at 5:20 pm

    It seems like nowadays you can’t turn on the TV without hearing about a baseball player being kidnapped or murdered. What do you think is behind this epidemic of violence directed at baseball players? What if anything can be done to stop it? Some have suggested that baseball players be recognized as a protected class and legislation be enacted to recognize violence against them as a hate crime. Do you agree or disagree? What should be done? Do you think Bud Selig is doing enough? Should the President or Congress get involved?

  • MAK & CHEESE November 30, 2013 at 5:42 pm

    I am designing a web page using html and css, while running the html file i have page size difference in various browser can i set a web page dimension ?

  • Matthew David November 30, 2013 at 10:35 pm

    I need to write a feature story tonight and have no idea how! It’s for my journalism class (which I don’t even know WHY I took anymore.) I have to write about how Frankenstein was the beginning in reanimating corpses and how the book and film created that. BUT I HAVE NO IDEA WHERE TO BEGIN! I don’t know what to do at all and I have to get it in before midnight tonight! What is the layout? What do I do for quotes? Do I even need quotes? Can I add opinion? Do I have to still use the inverted pyramid style? What do I DOOOO? PLEASE HELP ME! D;

  • Stevalicious December 1, 2013 at 7:21 am

    If I need to write a java program for blackjack I need three classes Hand , Deck,Card .How can I have three of them each with a main method?please reply