In acest articol vom discuta despre pseodo-selectorii de atribute din CSS. Acestia pot fi foarte utili atunci cand incercam sa aplicam stiluri pe elemente cum ar fi tag-ul <input>. Cei care au mai lucrat cu formulare stiu ca acestea ridica o problema la aplicarea stilurilor.
Problema este ca avem un tag numit <input>, cu diverse atribute. In functie de acestea, input-ul poate avea atat o functionalitate cat si un aspect diferit. De exemplu, un tag input cu atributul type=text, va afisa un camp de completat. Un input cu type=radio va afisa un radio-button, care evident cere aplicarea unui stil total diferit. Mai mult de atat, chiar si butonul de submit are in spate un tag input cu atributul type=submit.
Cum putem rezolva aceasta problema? Una din solutii este folosirea unor clase pentru diverse tipuri de input. Aceasta nu este neaparat gresit, dar nu recomand incarcarea tag-urilor input cu atributul class, decat daca este neaparat necesar.
Cealalta solutie, cea pe care o recomand, este folosirea unor pseudo-selectori de CSS. Acestia se aplica imediat dupa selectorul de tag, iar pentru un input de tip text, va fi de forma input[type=text] {}. Pe acelasi principiu, daca vrem sa aplicam un stil pe un radio button, il vom selecta cu input[type=radio] {}. La fel si pentru celelalte tipuri de input.
Tin sa mentionez ca un aslfel de pseudo-selector functioneaza cu orice fel de atribut standard. Am putea de exemplu sa scriem un selector de genul form[name=commentForm] {}.
Si nu trebuie sa tina neaparat de formulare. Am putea scrie de exemplu un selector de genul h1[name=heading] {}. Evident, un astfel de selector, nu este foarte util, dar l-am folosit pentru a ilustra ca se aplica pe orice fel de tag si atribut standard.
Va pun la dispozitie in cele ce urmeaza, un snippet de cod in care demonstrez utilitatea acestui tip de pseudo-selector. HTML-ul arata asa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pseudoselectori atribute CSS - Demo</title> </head> <body> <div id="commentFormContainer"> <h1>Da-ti cu parerea</h1> <form action="foo.php" method="post" name="commentForm"> <p> <input type="text" name="name" id="name" /> <label for="name">Nume* (obligatoriu)</label> </p> <p> <input type="text" name="email" id="email" /> <label for="email">E-mail* (obligatoriu) (nu va fi publicat)</label> </p> <p> <input type="text" name="url" id="url" /> <label for="url">URL (link catre site-ul tau)</label> </p> <p> <label for="comment">Comentariu* (obligatoriu)</label><br /> <textarea cols="50" rows="8" name="comment" id="comment"></textarea> </p> <p> <input type="checkbox" name="subscribe" value="1" id="subscribe" /> <label for="subscribe">Doresc sa fiu anuntat prin email cand se posteaza un raspuns</label> </p> <p> <input type="submit" value="Publica" /> </p> </form> </div> </body> </html>
Iar CSS-ul pentru stilizarea lui este:
body {
font-family: Tahoma, Geneva, sans-serif;
color: #555;
}
h1 {
font-size: 24px;
}
p {
margin: 5px 0px 0px 0px;
font-size: 12px;
}
#commentFormContainer {
width: 430px;
margin: 100px auto;
padding: 25px;
border: 5px solid #CCC;
overflow: auto;
}
input[type=text] {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
input[type=checkbox] {
margin: 0px 2px 0px 0px;
}
input[type=submit] {
float: right;
padding: 5px 10px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ddd), color-stop(1, #999));
background: -moz-linear-gradient(top, #ddd, #999);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd', EndColorStr='#999')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd', EndColorStr='#999');
font-weight: bold;
color: #333;
}
textarea {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 0px;
}
Va invit sa studiati codul, sa-l folositi si sa-l modificati. Daca aveti nelamuriri sau propuneri va astept in sectiunea comentarii.