[Résolu] Style d'un conteneur en fonction de son contenu

Salut à tous,

Le titre me plait pas trop, mais j'arrive pas à trouver mieux

Je travail sur un framework d'applications web, utilisé par l'équipe de développement dont je fais partie.

Pour faire simple, une partie du framework consiste en des classes CSS qu'il suffit d'appliquer sur des éléments pour avoir un rendu "beau" et surtout uniforme dans toutes nos applis. Ce sont des applis uniquement à usage interne à l'entreprise, et notre seule exigence de compatibilité est Firefox dernières version et Chrome dernières versions.

Voila pour le contexte. J'ai fait notamment une classe "UI-table" qui style les tableaux (en-têtes en gras, coins arrondis, effet de survol et effet pyjama (coloriage d'une ligne sur deux)).

Jusque là tout va bien. Sauf que dans certains cas (certes rares), on a besoin d'imbriquer un tableau dans un autre (c'est-à-dire qu'une cellule du tableau principal contiendra un autre tableau).

Au niveau HTML, ça donne donc ce genre de chose:

<table class="UI-table">
    <tr>
        <td>
            <table class="UI-table">...</table>
        </td>
        ...
    </tr>
    ....
</table>

Dans ces cas-là, j'aimerais désactiver l'effet pyjama sur les cellules du tableau principal qui contiennent un autre tableau. Tout simplement parce que ça fait moche. Je voudrais forcer les cases qui contiennent un autre tableau à avoir la couleur d'arrière-plan la plus claire des deux (blanc, pour l'instant).

Une solution simple serait d'appliquer une classe sur la cellule qui contient un tableau, pour forcer l'arrière-plan. Sauf que je développe un framework, et j'aimerais que les développeurs n'aient pas à se préoccuper de ce détail.

Je cherche donc à écrire, en CSS, la règle suivante

table.UI-table "td qui contient un table" { background-color:white; }

Je ne vous cache pas que j'ai cherché un peu partout, et que je crains que la réponse soit juste "c'est pas possible". Mais je me dis que vous aurez peut-être des idées intéressantes pour contourner cette impossibilité...

Merci d'avance
Modifié par jiber2fr (10 Dec 2012 - 14:10)

Hello.

Ce genre de sélecteur n'existe pas en CSS. De là, deux solutions.

* Utiliser un sélecteur d'enfant pour limiter la portée de ton effet pyjama avec une classe en plus

.UI-table-stripped > tr > td

* Utiliser une classe directement sur les td.

Merci Florian.

La première solution ne convient pas, puisque l'effet pyjama doit être présent sur tout le reste du tableau (c'est juste la case qui contient un autre tableau qui doit être blanche à coup sûr).

Par hasard, sais-tu s'il existe un système "pré css" (je sais pas comment ça s'appelle, genre SASS), qui ajouterait cette possibilité ? Même si à vue de nez, je ne vois pas comment ils traduiraient ça en CSS pur au final...

Merci

Malheureusement, je ne crois pas qu'une solution à base de préprocesseur soit possible.

Sinon, des sélecteurs du type

table td {
    //code
}

table table td {
    //code qui surcharge le précédent
}

Mais ça risque vite de devenir le bordel.

Florian_R a écrit :
...Mais ça risque vite de devenir le bordel.

Comme les tableaux imbriqués ?...

Ca c'est un coup bas

C'était soit un tableau imbriqué, soit des <br>

jiber2fr a écrit :
Ca c'est un coup bas
C'était soit un tableau imbriqué, soit des <br>

Une boutade