2017-07-18 3 views
1

J'ai besoin d'un sélecteur CSS où tous les enfants d'une classe donnée qui contiennent l'une des n classes sont affectés.CSS Selector: Enfants de classe avec l'une des classes suivantes

Mon conteneur est .k-editor et les enfants que je suis à la recherche d'affecter sont toutes les colonnes bootstrap col-xs-1, col-xs-2 etc.

J'ai essayé ce

.k-editor 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    padding: 0; 
} 

mais cela semble ignorer le parent .K-éditeur et s'applique à toutes les colonnes.

Toute personne en mesure de fournir des informations sur ce que je fais peut-être mal?

Répondre

5

Ce code peut être raccourci:

.keditor [class^="col"] { 
    padding: 0; 
} 
+0

Oh des thats génial, je me demandais toujours si un sélecteur comme celui-ci existait, mais ne pouvait jamais sembler le trouver. Merci beaucoup.. –

2

C'est la plus courte solution: .k-editor [class^="col"] correspondra à tous les enfants de .k-editor dont la classe commence par col.

L'autre façon est de préfixe .k-editor à chacun de vos sélecteurs séparés par des virgules:

.k-editor .col-xs-1, .k-editor .col-sm-1, .k-editor .col-md-1, .k-editor .col-lg-1 etc