Afficher uniquement l'enfant a la même classe que le parent

Question

Existe-t-il un moyen d'afficher un enfant si seul le parent a la même classe? La partie délicate de la question est parent et l'enfant ne connaît pas leur classe.

Dans ce cas je voudrais montrer seulement parent et son premier enfant. Mais si je change la classe parent du rouge au jaune, je voudrais montrer seulement le parent et son deuxième enfant.

Est-il possible de créer une telle chose?

Answer 1

uniquement si les classes sont connus à l'avance ...

div div { display: none; } 

div.yellow .yellow, 
div.blue .blue, 
div.red .red { display: block; } 

Answer 2

Oui, mais vous aurez besoin d'une poignée de définitions de classes CSS supplémentaires. Essayez quelque chose comme ceci:

div.red{ 
    display:block; 
} 
div.red div.red{ 
    display: block; 
} 
div.red div.yellow{ 
    display: none; 
} 
div.red div.blue{ 
    display: none; 
} 

etc ... Si vous ne voulez pas écrire explicitement comme ça la seule façon serait javascript. JSFIDDLE

Answer 3

Vous ne serez pas en mesure de le faire uniquement en CSS, en supposant que les noms de classe sont inconnus du CSS. Toutefois, si elles sont d'un ensemble défini de classes, vous pouvez accomplir cela en faisant quelque chose comme ceci (cet exemple en utilisant CSS3 :not selector):

div.red > :not(.red), 
div.yellow > :not(.yellow), 
div.blue > :not(.blue) 
{ 
    display: none; 
} 

Si vous voulez vous aventurer dans JavaScript, vous pourriez être en mesure d'accomplir la tâche en faisant quelque chose comme (JSFiddle):

var myDiv = document.getElementById('myDiv'); 
for(var i=0, j=myDiv.children.length; i<j; ++i) 
{ 
    if(myDiv.children[i].className != myDiv.className) 
    { 
     myDiv.children[i].style.display = 'none'; 
    } 
} 

Cela suppose que le div a un id de myDiv, et les classes d'éléments ne comprennent rien d'autre.