HTML/CSS/Style Basics/attribute selector

Материал из Web эксперт
Перейти к: навигация, поиск

A blockquote with a cite attribute displayed with CSS

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> blockquote[cite]:after { 

 content: "Source: " attr(cite);

} </style> </head> <body>

this is a test. j.ru this is a test. .

</body> </html> 

</source>


Attribute Selectors for form controls

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

    <head>
       <style type="text/css">
   
           option[value] {
               letter-spacing: 2px;    
           }
           option[value="newspaper"] {
               background: orange;    
           }
           option[value="magazine"] {
               background: red;
           }
           option[value="television"] {
               background: black;
           }
           option[value="radio"] {
               background: green;
           }
           option[value="other"] {
               background: blue;
           }
           input[name$="[name]"] {
               color: darkred;
           }
           input[name$="[email]"] {
               color: darkblue;
           }
           textarea[name$="[address]"] {
               color: purple;
           }
           textarea[name$="[message]"] {
               color: black;
           }
           select[name$="[heard]"] {
               color: darkgreen;
           }
           input[name^="feedback"], select[name^="feedback"], textarea[name^="feedback"] {
               font-weight: bold;
           }
       </style>
       <title>Feedback Form - Widgets and What"s-its</title>
   </head>
   <body>

Widgets and What"s-its

       <form>

Tell us what"s on your mind..

               <label for="feedback[heard]">How"d you hear about us?</label>           
               <select name="feedback[heard]">
                   <option value="">Choose...</option>
                   <option value="newspaper">Newspaper</option>
                   <option value="magazine">Magazine</option>
                   <option value="television">Television</option>
                   <option value="radio">Radio</option>
                   <option value="other">Other</option>
               </select>

       </form>
   </body>

</html> 

</source>


Attribute Substring Selectors

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Substring Selectors</title>
       <style rel="stylesheet" type="text/css">

a[href^="ftp://"] { 

   color: goldenrod;
   background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;

} a[href*="#"] { 

   color: cadetblue;
   background: red;

} a[href$=".html"] { 

   color: dodgerblue;
   background: pink;

} a[href$=".pdf"] { 

   color: red;
   background: yellow;

} 

       </style>
   </head>
   <body>
           <a href="index.html">HTML Page Link</a>
           <a href="document.pdf">PDF Link</a>
           <a href="ftp://www.example.ru/">FTP Link</a>
           <a href="http://www.example.ru/#note">Anchor Link</a>
   </body>

</html> 

</source>


Attribute Substring Selectors: a[href*="#"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Substring Selectors</title>
       <style rel="stylesheet" type="text/css">

a[href*="#"] { 

   color: cadetblue;
   background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;

} 

       </style>
   </head>
   <body>
           <a href="index.html">HTML Page Link</a>
           <a href="document.pdf">PDF Link</a>
           <a href="ftp://www.example.ru/">FTP Link</a>
           <a href="http://www.example.ru/#note">Anchor Link</a>
   </body>

</html> 

</source>


Attribute Substring Selectors: a[href^="ftp://"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Substring Selectors</title>
       <style rel="stylesheet" type="text/css">

a[href^="ftp://"] { 

   color: goldenrod;
   background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;

} 

       </style>
   </head>
   <body>
           <a href="index.html">HTML Page Link</a>
           <a href="document.pdf">PDF Link</a>
           <a href="ftp://www.example.ru/">FTP Link</a>
           <a href="http://www.example.ru/#note">Anchor Link</a>
   </body>

</html> 

</source>


Attribute Substring Selectors: a[href$=".html"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Substring Selectors</title>
       <style rel="stylesheet" type="text/css">

a[href$=".html"] { 

   color: dodgerblue;
   background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;

} 

       </style>
   </head>
   <body>
           <a href="index.html">HTML Page Link</a>
           <a href="document.pdf">PDF Link</a>
           <a href="ftp://www.example.ru/">FTP Link</a>
           <a href="http://www.example.ru/#note">Anchor Link</a>
   </body>

</html> 

</source>


Attribute Substring Selectors: a[href$=".pdf"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Substring Selectors</title>
       <style rel="stylesheet" type="text/css">

a[href$=".pdf"] { 

   color: red;
   background: url("http://www.wbex.ru/style/logo.png") no-repeat left center;

} 

       </style>
   </head>
   <body>
           <a href="index.html">HTML Page Link</a>
           <a href="document.pdf">PDF Link</a>
           <a href="ftp://www.example.ru/">FTP Link</a>
           <a href="http://www.example.ru/#note">Anchor Link</a>
   </body>

</html> 

</source>


input[type="password"][name="password"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Selectors</title>
       <style rel="stylesheet" type="text/css">

input[type="password"][name="password"] { 

   background: crimson;
   color: pink;
   border: 3px solid pink;

} 

       </style>
   </head>
   <body>
       <form method="post" action="">
           <fieldset>
               <legend>Feedback Form</legend>
<tbody> </tbody> 
                               <label for="first-name">First Name:</label>

                               <input type="text"
                                      name="first_name"
                                      id="first-name"
                                      value=""
                                      size="25" />

                               <label for="last-name">Last Name:</label>

                               <input type="text"
                                      name="last_name"
                                      id="last-name"
                                      value=""
                                      size="25" />

                               <label for="account-password">Password:</label>

                               <input type="password"
                                      name="password"
                                      id="account-password"
                                      size="25"
                                      value="" />

           </fieldset>
       </form>
   </body>

</html> 

</source>


input[type="text"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Selectors</title>
       <style rel="stylesheet" type="text/css">

input[type="text"] { 

   background: blue;
   color: lightblue;
   border: 3px solid lightblue;

} 

       </style>
   </head>
   <body>
       <form method="post" action="">
           <fieldset>
               <legend>Feedback Form</legend>
<tbody> </tbody> 
                               <label for="first-name">First Name:</label>

                               <input type="text"
                                      name="first_name"
                                      id="first-name"
                                      value=""
                                      size="25" />

                               <label for="last-name">Last Name:</label>

                               <input type="text"
                                      name="last_name"
                                      id="last-name"
                                      value=""
                                      size="25" />

                               <label for="account-password">Password:</label>

                               <input type="password"
                                      name="password"
                                      id="account-password"
                                      size="25"
                                      value="" />

           </fieldset>
       </form>
   </body>

</html> 

</source>


input[type="text"][name="last_name"]

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <title>Attribute Selectors</title>
       <style rel="stylesheet" type="text/css">

input[type="text"][name="last_name"] { 

   background: forestgreen;
   color: yellowgreen;
   border: 3px solid yellowgreen;

} 

       </style>
   </head>
   <body>
       <form method="post" action="">
           <fieldset>
               <legend>Feedback Form</legend>
<tbody> </tbody> 
                               <label for="first-name">First Name:</label>

                               <input type="text"
                                      name="first_name"
                                      id="first-name"
                                      value=""
                                      size="25" />

                               <label for="last-name">Last Name:</label>

                               <input type="text"
                                      name="last_name"
                                      id="last-name"
                                      value=""
                                      size="25" />

                               <label for="account-password">Password:</label>

                               <input type="password"
                                      name="password"
                                      id="account-password"
                                      size="25"
                                      value="" />

           </fieldset>
       </form>
   </body>

</html> 

</source>


Matches are case sensitive and must match letter-for-letter including whitespace

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p[title="#4 paragraph"] { 

 font-weight: bold;

}

</style> </head> <body>

p[title="#4 paragraph"] selects all paragraphs with a title attribute containing the exact text, #4 paragraph.

</body> </html> 

</source>


p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, myPara

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p[title="myPara"] { 

 font-weight: bold;

}

</style> </head> <body>

p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, #4 paragraph.

</body> </html> 

</source>


p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p[title~="paragraph"] { 

 background-color: gold;

}

</style> </head> <body>

p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.

</body> </html> 

</source>


p[title] selects all paragraphs containing a title attribute.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p[title] { 

 padding: 5px 10px;
 border: 1px solid gray;

}

</style> </head> <body>

p[title] selects all paragraphs containing a title attribute.

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/attribute_selector&oldid=5947»