HTML and CSS Reference
In-Depth Information
The following markup shows how a green background is applied to the <p> tag with
the id value of " p2 ", whereas no style is applied to the other paragraphs:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Id Selector Example </title>
<style type="text/css" media="all">
#p2 {background-color: green;}
<p> This is the first paragraph. </p>
<p id="p2"> This is the second paragraph. </p>
<p> This is the third paragraph. </p>
As a core (or global) attribute, the id attribute is common to nearly all (X)HTML
elements. However, given widespread use of id attributes, page authors need to be very
careful to ensure that elements are named uniquely. Developers must not name two
elements the same name using the id attribute. If two of the paragraphs have id="p2" ,
what will happen? In the case of most browsers, both paragraphs will show up green.
However, this is such sloppy style that it generally will result in significant errors once
scripting is added to the document. Furthermore, the document will not validate with such
mistakes. If multiple elements should be affected in a similar way, use a class rule instead.
Element-Specific id Rules
One nonintuitive variation of an id selector is an element-specific selector like
p#p2 {background-color: green;}
This would select only paragraph elements with their id attribute set to " p2 . " Compare this
to a rule like
#p2 {background-color: green;}
Search WWH ::

Custom Search