Sélection balise après nth-child ou nth-of-type

sélection de balise

Sujet résolu

21 octobre 2021 à 18:15:32

Bonjour tout le monde!

alors voilà le problème, je fais un site où je met ce que j'apprend ici en fiche pour m'entrainer.

Et sur le cours sur les tableaux en html, j'aimerais que le premier tableau de la page s'affiche sans bordure, le second avec, etc..

Donc que le css soit évolutif! :-°

J'ai d'abord pensé distribuer des "id" différents à chaque fois, mais j'ai trouvé ça moche!

j'ai ensuite pensé à mettre du css directement dans les balises -> tout aussi moche!

L'idée maintenant est de mettre le code dans la partie "head" de la page html!

Mon but est que les cellules du 2ème tableau seulement soit affectées par le code css suivant

td
{
     border: 1px solid black;
}

J'ai donc fait :

table:nth-child(2) td
{
      border: 1px solid black;
}

Mais cela ne fonctionne pas!

J'ai essayé en enlevant le "nth-child(2)" et cela fonctionne très bien, mais sur tout les tableaux!

D'où ma question, est il impossible de sélectionner une balise après un nth-child? et si oui, comment faire à la place?

Voilà! ciao!

-
Edité par JosselinPrevost1 23 octobre 2021 à 14:19:55

Lamecarlate

21 octobre 2021 à 18:55:01

Bonjour,

il nous faudrait ton html pour confirmer, mais je pense que c'est parce que le deuxième tableau n'est pas le deuxième enfant de son parent. Tu peux essayer avec :nth-of-type, qui ciblera le deuxième élément du type ciblé (ici table, donc).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JosselinPrevost1

23 octobre 2021 à 13:37:30

Bon déjà ça m'a permis de comprendre que j'avais pas bien saisi l'utilisation du nth-child! mais j'ai essayé avec ce que tu propose et ça ne fonctionne pas non plus, comme je sais pas trop si tu préfère que je mète tout le code ou pas je vais tout mettre, j'ai rajouté des commentaires devant les tableaux pour se repérer

Alors, voici la partie body

<body>
	<header>
		<div id="logo"><img src="../../img/logo.png" alt="logo asticot">
			<p>Jojo l'asticot</p>
		</div>
		<nav id="nav_header">
			<ul>
				<li><a href="../../index.html">Acceuil</a></li>
				<li><a href="../../cours.html">Les cours</a></li>
				<li><a href="../../faq.html">F.A.Q.</a></li>
				<li><a href="../../liens.html">Liens</a></li>
				<li><a href="#bas_de_page">Bas de page</a></li>
				<li><a href="#haut">Haut de page</a></li>
			</ul>
		</nav>
	</header>

	<section id="haut">
			<p id="accroche">Tout ce qu'il faut retenir pour le développement web</p>
			<aside id="attention">
				<img src="../../img/miniattention.png" alt="panneau attention">
				<p>Ce site est en cours de construction. N'étant pas encore totalement formé, il comporte surrement des erreus que je verrais plus tard. Il ne faut donc pas avoir une confiance aveugle dans ce que je raconte, et vos commentaires seront les bienvenus si vous apercevez des erreurs!</p>
			</aside>
	</section>


	<nav class="nav_corp">
		<h1>MENU</h1>
		<h2>HTML5 & CSS3</h2>
		<ul>
			<li><a href="Intro.html">I / Présentation</a></li>
			<li><a href="tableaux.html">Faire des tableaux</a></li>
		</ul>
	</nav>

		<section class="corp">
			<h1>Coder un site en HTML5 et CSS3</h1>

			<article class="cours">
				<h1>Créer et manipuler des tableaux</h1>

                <h2>I / générale</h2>

                <p>pour créer un tableau, on utilise les balises "table"</p>
                <div class="html">
                    <code>&lt;table&gt; &lt;/table&gt;</code>
                </div>
                <p>On utilise ensuite les balises :<br>
                <ul>
                    <li>&lt;tr&gt; &lt;/tr&gt; pour écrire une ligne</li>
                    <li>&lt;td&gt; &lt;/td&gt; pour écrire une cellule dans la ligne</li>
                </ul>

                <p>Le code présenté ici</p>
                <div class="html">
                    <pre>
&lt;table&gt;
    &lt;tr&gt; 
        &lt;td&gt; ligne 1 cel 1 &lt;/td&gt;
        &lt;td&gt; ligne 1 cel 2 &lt;/td&gt;
        &lt;td&gt; ligne 1 cel 3 &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt; 
        &lt;td&gt; ligne 2 cel 1 &lt;/td&gt;
        &lt;td&gt; ligne 2 cel 2 &lt;/td&gt;
        &lt;td&gt; ligne 2 cel 3 &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</pre>
                </div>
                <p>donnera ce résultat</p>

<!-- *********************************** 1ère <table> ************************************ -->
                <div class="result">
                    <table>
                        <tr>
                            <td>ligne 1 cel 1</td>
                            <td>ligne 1 cel 2</td>
                            <td>ligne 1 cel 3</td>
                        </tr>
                        <tr>
                            <td>ligne 2 cel 1</td>
                            <td>ligne 2 cel 2</td>
                            <td>ligne 2 cel 3</td>
                        </tr>
                    </table>
                </div>
				<p>Ouch... C'est pas beau!</p>
                <p>On va créer des bordures à nos cellules pour mieux voir!</p>
                <div class="css">
<pre>
td
{
    border: 1px solid black; 
}</pre>
                </div>
                <p>Et voilà le résultat!</p>

<!-- *************************************** 2ème <table> ************************************ -->
                <div class="result">
                    <table>
                        <tr>
                            <td>ligne 1 cel 1</td>
                            <td>ligne 1 cel 2</td>
                            <td>ligne 1 cel 3</td>
                        </tr>
                        <tr>
                            <td>ligne 2 cel 1</td>
                            <td>ligne 2 cel 2</td>
                            <td>ligne 2 cel 3</td>
                        </tr>
                    </table>
                </div>

                <p>Bon par contre c'est encore moche, on va utiliser la propriété "border-collapse" qui peut prendre 2 valeurs :</p>
                <ul>
                    <li>separate : par défaut, c'est ce qu'on a au-dessus</li>
                    <li>collapse : pour coller les cellules</li>
                </ul>

                <div class="css">
                    <pre>
table 
{
    border-collapse: collapse;
} </pre>
                </div>
                <p>eeeetttttttt!</p>

<!-- *************************************** 3ème table ************************************** -->
                <div class="result">
                    <table>
                        <tr>
                            <td>ligne 1 cel 1</td>
                            <td>ligne 1 cel 2</td>
                            <td>ligne 1 cel 3</td>
                        </tr>
                        <tr>
                            <td>ligne 2 cel 1</td>
                            <td>ligne 2 cel 2</td>
                            <td>ligne 2 cel 3</td>
                        </tr>
                    </table>
                </div>
				

			</article>
			
		</section>

		<footer id="bas_de_page">
			<div>
				<h1>Dernières modifications</h1>
				<p>A venir</p>
			</div>
			<div>
				<h1>Contacts</h1>
				<a href="mailto:">me contacter par mail</a>
			</div>
			<div>
				<h1>Mentions légales</h1>
				&copy;jojo l'asticot
			</div>
		</footer>
</body>

et la partie css :

<style>

        /***************************TABLE 2**************************************/
    table:nth-of-type(2) td
    {
        border: 1px solid black;       
    }

        /****************************TABLE 3****************************************/
    table:nth-of-type(3) td
    {
        border: 1px solid black;
    }
    table:nth-of-type(3)
    {
        border-collapse: collapse;
    }
    </style>

et c'est bien dans l'utilisation du nth-of-type qu'il y a une erreur de ma part!

j'ai testé ça au même endroit dans le fichier html :

    <style>

    table td
    {
        border: 1px solid black;       
    }

    table:nth-of-type(3)
    {
        border-collapse: collapse;
    }

    </style>

Et il se trouve que là, tout mes tableaux on des cellules mais le 3ème tableau n'est pas affecté par la propriété "collapse"! :'(

-
Edité par JosselinPrevost1 26 octobre 2021 à 13:57:09

Lamecarlate

24 octobre 2021 à 10:22:37

Hmmm, je pense que c'est dû au fait que tes tables sont dans une div à chaque fois. Tu peux lire https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type : nth-of-type cible le xième élément du type de l'élément choisi *dans son parent*.

Mais je pense qu'à ce stade il sera plus sûr d'utiliser des classes.

-
Edité par Lamecarlate 24 octobre 2021 à 10:23:31

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JosselinPrevost1

24 octobre 2021 à 18:57:57

Oui tu a raison!

le table:nth-of-type reste "enfermé" dans le <div class="result">, il ne peut donc pas trouver de table:nth-of-type(2) puisqu'il n'y a qu'une table par div!

J'ai effectivement essayé ceci

table:nth-of-type(1) 
{
     background-color: lime;
}

et ça fonctionnait très bien , mais pour tout les tableaux!

Je me suis d'abord dit qu'il faudrait quelque chose comme

.result:nth-of-class()

Mais j'ai cherché et justement elle n'existe pas :euh: et certains développeur aimeraient la voir dans css4

Donc finalement, je crois que je n'ai que 2 solutions :

- Il faudrait que tout mes tableaux soient directement enfant de la balise <article> qui contient les <div class="result"> pour pouvoir les appeler avec table:nth-of-type() ?!

- Ou alors, ce que tu a dit, mettre un id à chaque tableau, c'est ce que j'ai d'ailleurs fait

Bon voilà, c'était pour tenter une petite conclusion pour les suivant.e.s, dites si je me suis trompé! ciao et merci Lamecarlate!

-
Edité par JosselinPrevost1 24 octobre 2021 à 18:59:29

Lamecarlate

25 octobre 2021 à 19:50:54

Pour ta première question : oui, il faudrait les sortir des div de classe result - ce qui n'est pas forcément ce que tu veux.

Pour la seconde idée : je conseille une classe plutôt qu'un id, plus facile à surcharger si jamais le besoin s'en faisait sentir. Réserve les id à JavaScript

Pas d'aide concernant le code par MP, le forum est là pour ça :)

JosselinPrevost1

26 octobre 2021 à 13:25:41

Ah!! Ce genre de conseil qui vaut de l'or sur des gros chantiers!

Au top, merci! :soleil:

Lamecarlate

26 octobre 2021 à 22:07:40

Pense à marquer ton sujet comme résolu si c'est le cas

tu as un bouton pour ça en haut à droite.

Pas d'aide concernant le code par MP, le forum est là pour ça :)