Kunnen deze css selectors korter?
Ik wil dat alle inputs, selects en textarea's een breedte hebben van 200px;
dus doe ik:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
/*
.contaner is de div
*/
.container input[type=text], .container select, .container textarea {
width: 200px;
}
.contaner is de div
*/
.container input[type=text], .container select, .container textarea {
width: 200px;
}
Die selector regel vind ik erg lang, en ik moet steeds hetzelfde herhalen.
Is er ook een manier zoals:
Ik weet dat die selector regel niet bestaat, maar kun je ook in 1 keer aangeven dat een regel geldt voor meerdere tagnames in een element?
Jan terhuijzen op 02/08/2014 16:54:38:
Ik weet dat die selector regel niet bestaat, maar kun je ook in 1 keer aangeven dat een regel geldt voor meerdere tagnames in een element?
Ja, maar alleen op de 'lange' manier die je beschrijft. Er is geen kortere manier.
Jan terhuijzen op 02/08/2014 16:54:38:
Die selector regel vind ik erg lang, en ik moet steeds hetzelfde herhalen.
Hoezo moet je hem steeds herhalen? Als je hem in een extern stijlblad zet hoeft dat toch niet?
LESS, en dan met name het hoofdstuk Nested rules.
Voorbeeld:
Wanneer de LESS in CSS omgezet wordt (kan client- en serverside) krijg je een CSS-bestand met de uitgeschreven regels.
Overigens kent SASS dezelfde functie: Leesvoer.
Je zou kunnen kijken naar bijvoorbeeld Voorbeeld:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.container {
// code voor .container
input[type=text],select,textarea {
// code voor de formulier elementen
}
}
// code voor .container
input[type=text],select,textarea {
// code voor de formulier elementen
}
}
Wanneer de LESS in CSS omgezet wordt (kan client- en serverside) krijg je een CSS-bestand met de uitgeschreven regels.
Overigens kent SASS dezelfde functie: Leesvoer.
*De* optie om het korter te maken is alle elementen binnen de container die die stijl moeten hebben een nieuwe class te geven en dan de stijl aan die class te hangen. Dan kan je selector zo kort zijn als twee tekens (.a). Of het een handige optie is is heel iets anders....
Erwin H op 04/08/2014 10:58:24:
*De* optie om het korter te maken is alle elementen binnen de container die die stijl moeten hebben een nieuwe class te geven en dan de stijl aan die class te hangen. Dan kan je selector zo kort zijn als twee tekens (.a). Of het een handige optie is is heel iets anders....
Dat is inderdaad korter. Maar evenzo is de vraag of je dat wil. Je zou de HTML in principe zo schoon mogelijk moeten houden, Jan, inclusief zo min mogelijk id's en klassen.
Gewijzigd op 07/08/2014 07:23:35 door Frank Conijn