Improve your website with a Premium WordPress Theme and Design it in Real Time.
search
HTML CSS JavaScript Appendix
You are here: Reference > CSS > selectors and pseudos > selectors

Selectors

Selector Support Description
*
Applies to any element, Universal selector.
E
Applies to an element of type E (E is a the name of the node).
.className
Applies to any element whose class attribute value is equal to className.
#myID
Applies to any element whose id attribute value is equal to myID.
E.className
Applies to an element of type E whose class attribute value is equal to className.
E#myID
Applies to an element of type E whose id attribute value is equal to myID.
E[attr]
7
 Applies to an element of type E with an "attr" attribute.
E[attr="val"]
7
 Applies to an element of type E with an "attr" attribute equal to "val".
E[attr*="val"]
7
 Applies to an element of type E with an "attr" attribute and whose value contains at least one occurance of the "val" string.
E[attr~="val"]
7
 Applies to an element of type E whose "attr" attribute value is a list of space-separated values, and at least one is equal to "val".
E[attr|="val"]
7
 Applies to an element of type E whose "attr" attribute value is a list of hyphen-separated values, and at least one is equal to "val".
E[attr^="val"]
7
 Applies to an element of type E with an "attr" attribute and whose value begins exactly with "val".
E[attr$="val"]
7
 Applies to an element of type E with an "attr" attribute and whose value ends exactly with "val".
E F
Applies to an F element that is a descendant of an E element.
E > F
7
 Applies to an F element that is a direct child of an E element.
E + F
7
 Applies to an F element that is immediately preceded by an E element.
E ~ F
7
 Applies to an F element that is preceded by an E element.

* (Universal selector)

Applies to any element in the document tree. The universal selector is omitted if it is not the only component of a sequence of simple selectors.
*#myid and #myid are equivalent.
*.className and .className are equivalent,
*[attr=val] and [attr=val] are equivalent.

E (Type selector)

Applies to an element of type E (E is a the name of the node). 
<head>
    <style>
        b {
            color:red;
        }
    </style>
</head>
<body>
    <b>This bold tag color is red.</b>
    <div>
        <b>This is red, too.</b>
    </div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

.className (class selector)

Applies to any element whose class attribute value is equal to className. 
<head>
    <style>
        .myClass {
            color:red;
        }
    </style>
</head>
<body>
    <b class="myClass">This bold tag color is red.</b>
    <div class="myClass">This division is red, too.</div>
    <b>But this bold tag is black.</b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

#myID (ID selector)

Applies to any element whose id attribute value is equal to myID. 
<head>
    <style>
        #myBold {
            color:red;
        }
    </style>
</head>
<body>
    <b id="myBold">This bold tag color is red.</b>
    <br />
    <b>But this bold tag is black.</b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E.className

Applies to an element of type E whose class attribute value is equal to className. 
<head>
    <style>
        B.myClass {
            color:red;
        }
    </style>
</head>
<body>
    <b class="myClass">This bold tag color is red.</b>
    <div class="myClass">This division is black.</div>
    <b>And this bold tag is black, too.</b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E#myID

Applies to an element of type E whose id attribute value is equal to myID. 
<head>
    <style>
        B#myBold {
            color:red;
        }
    </style>
</head>
<body>
    <b id="myBold">This bold tag color is red.</b>
    <div id="myBold">This division is black.</div>
    <b>And this bold tag is black, too.</b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr]

7
Applies to an element of type E with an "attr" attribute.
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="red text">span with title attribute</span>
    <br />
    <span>span without title attribute</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr="val"]

7
Applies to an element of type E with an "attr" attribute equal to "val".
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        input[type=reset] {
            color:red;
        }
    </style>
</head>
<body>
    <form action="#URL#" method="post">
        User Name: <input type="text" name="userName" />
        <br />
        <input type="reset" value="Reset" />
        <input type="submit" value="Sign in" />
    </form>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr*="val"]

7
Applies to an element of type E with an "attr" attribute and whose value contains at least one occurance of the "val" string.
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title*="hello"] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="hello my friend">span with "hello" in title</span>
    <br />
    <span title="my friend">span without "hello" in title</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr~="val"]

7
Applies to an element of type E whose "attr" attribute value is a list of space-separated values, and at least one is equal to "val".
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title~="hello"] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="hello my friend">span with "hello" in title</span>
    <br />
    <span title="hello-my-friend">span with "hello" in title, but separated with hyphen</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr|="val"]

7
Applies to an element of type E whose "attr" attribute value is a list of hyphen-separated values, and at least one is equal to "val".
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title|="hello"] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="hello-my-friend">span with "hello" in title separated with hyphen</span>
    <br />
    <span title="hello my friend">span with "hello" in title, but separated with space</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr^="val"]

7
Applies to an element of type E with an "attr" attribute and whose value begins exactly with "val".
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title^="hello"] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="hello my friend">span with "hello" at the beginning in title</span>
    <br />
    <span title="my friend hello ">span with "hello" at the end in title</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E[attr$="val"]

7
Applies to an element of type E with an "attr" attribute and whose value ends exactly with "val".
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        span[title$="hello"] {
            color:red;
        }
    </style>
</head>
<body>
    <span title="hello my friend">span with "hello" at the beginning in title</span>
    <br />
    <span title="my friend hello">span with "hello" at the end in title</span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E F

Applies to an F element that is a descendant of an E element. 
<head>
    <style>
        B SPAN {
            color:red;
        }
    </style>
</head>
<body>
    <span>a stand alone span</span>
    <br />
    <b>
        <span>span within a b element</span>
    </b>
    <br />
    <b>
        <i>
            <span>span within a b element but not as a direct child</span>
        </i>
    </b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E > F

7
Applies to an F element that is a direct child of an E element.
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        B > SPAN {
            color:red;
        }
    </style>
</head>
<body>
    <span>a stand alone span</span>
    <br />
    <b>
        <span>span within a b element</span>
    </b>
    <br />
    <b>
        <i>
            <span>span within a b element but not as a direct child</span>
        </i>
    </b>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E + F

7
Applies to an F element that is immediately preceded by an E element.
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        B + DIV {
            color:red;
        }
    </style>
</head>
<body>
    <div>a div element</div>
    <b>this is a bold element</b>
    <div>a div element preceded by a bold element</div>
    <div>another div element </div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

E ~ F

7
Applies to an F element that is preceded by an E element.
Note, this property works in Internet Explorer only from version 7. 
<head>
    <style>
        B ~ DIV {
            color:red;
        }
    </style>
</head>
<body>
    <div>a div element</div>
    <b>this is a bold element</b>
    <div>a div element preceded by a bold element</div>
    <div>another div element </div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no
User Contributed Comments

Post Content

Post Content
Search: search
© 2012 Dottoro.com. All rights reserved.