Kunnen deze css selectors korter?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan terhuijzen

jan terhuijzen

02/08/2014 16:54:38
Quote Anchor link
Ik heb een div element, met daarin een input[type=text], een select, en een textarea.
Ik wil dat alle inputs, selects en textarea's een breedte hebben van 200px;
dus doe ik:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
/*
.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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
.container ( input[type=text],select,textarea ) {
}

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?
 
PHP hulp

PHP hulp

13/04/2024 17:07:02
 
Frank Conijn

Frank Conijn

03/08/2014 19:47:34
Quote Anchor link
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?
 
Elwin - Fratsloos

Elwin - Fratsloos

04/08/2014 10:40:30
Quote Anchor link
Je zou kunnen kijken naar bijvoorbeeld LESS, en dan met name het hoofdstuk Nested rules.
Voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
.container {
    // 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.
 
Erwin H

Erwin H

04/08/2014 10:58:24
Quote Anchor link
*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....
 
Frank Conijn

Frank Conijn

07/08/2014 07:23:04
Quote Anchor link
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.