Selector : nième-child ?

Bonsoir tout le monde,

je suis en train de faire un css sur un site HTML existant dont je ne peux modifier la structure. Dont voici un extrait :

<div id="modules">
    <div class="moduletable">
        Blabla
    </div>
    <div class="moduletable">
        <form method="post" action="index.php">
            <div class="search">Blabla</div>
        </form>
    </div>
</div>

J'applique un style (Bordure et fond) à tous les éléments .moduletable de la page, seulement j'aimerai que pour celui, qui a la classe "search" appliquer un style différent (Pas de bordure, fond différent).

Existe-il en CSS un moyen permettant de faire ceci, ou bien a defaut de prendre le deuxieme enfant de la div #modules ? Car je connais :first-child, mais rien pouvant spécifier la position de l'enfant..

En esperant avoir été clair..
Merci à vous !

Molkobain
Modifié par Molkobain (12 Jan 2010 - 23:08)

bonjour Molkobain,

bon alors je suis pas sûr de tout avoir saisi mais je pense qu'il te suffit d'utiliser la classe search pour appliquer un style différent non ?

j'ai fait un petit essais avec le bout de code html que tu nous donnes puis j'ai ajouté une css comme ceci

#modules {
	width:500px;
	background-color:#099;
}

.moduletable {
	border:#F00 solid 1px;
	background-color:#C6F;
	
	width:250px;
	height:50px;
	margin-bottom:15px;
	padding:5px 5px 5px 5px;
}
.search {
	background-color:#63F;
	padding:5px 5px 5px 5px;
}

voici un aperçu du rendu sous chrome:



en espérant avoir ouvert la voie à d'autres idées, bonne continuation

Bonsoir Quikers,

merci pour ton exemple, cependant dans mon problème il faudrait que je puisse enlever la bordure qui est deja appliquée sur le .moduletable car sinon, les deux bordures se côtoient (.moduletable et .search)..

Salut,

en attendant de pouvoir utiliser des sélecteurs plus poussés de CSS3 je dirais que cela dépend du code :
* si tu as toujours 2 éléments DIV avec une classe moduletable il suffit de n'affecter la bordure qu'au :first-child
* si tu ne sais pas à l'avance le nombre de DIV je ne vois plus qu'une modification de la classe via JavaScript

Edit: cela dit si tu ne peux pas du tout toucher au code html ça va être dur de faire du JavaScript.
Modifié par Heyoan (13 Jan 2010 - 20:02)

Effectivement, je ne vois que la solution du javascript. Car meme si CSS3 permet la selection du n-ième child, on est pas pret d'avoir son support sur tous les navigateurs..

:)

Molkobain a écrit :
prendre le deuxieme enfant de la div #module

Pas sûr d'avoir bien saisi la question mais sinon quelque chose comme ça:

#module > :first-child + *