CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 Apprendre à utiliser les sélecteurs CSS adjacents

Apprendre à utiliser les sélecteurs CSS adjacents

Exercice de titres et de paragraphes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML 5
Revoir le teaser Je m'abonne
3,7
Transcription
79,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,7
79,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction aux sélecteurs CSS avancés

Objectifs

Les objectifs de cette vidéo sont de :
1. Comprendre le fonctionnement des sélecteurs adjacents en CSS.
2. Apprendre à cibler et styliser des éléments de manière efficace.
3. Appliquer les sélecteurs adjacents dans des situations réelles.

Résumé

Découvrez comment utiliser le sélecteur adjacent en CSS pour cibler des éléments HTML et appliquer des styles de manière efficace et précise.

Description

Dans cette leçon, vous apprendrez à utiliser les sélecteurs adjacents en CSS pour styliser des éléments HTML sans recourir à des classes supplémentaires. Le sélecteur adjacent ( + ) permet de cibler un élément directement précédé d'un autre élément spécifique. Par exemple, en utilisant h1 + p, vous pouvez cibler tous les paragraphes suivant immédiatement un titre h1 et leur appliquer un style particulier comme un fond de couleur gris.

Vous découvrirez aussi comment combiner des sélecteurs pour cibler des éléments plus complexes comme la deuxième li d'un ul. Nous testerons des exemples concrets, incluant le stylisme de paragraphes situés entre deux listes non ordonnées.

Ce tutoriel montre également comment appliquer des styles spécifiques sans modifier le code HTML, ce qui est particulièrement utile lorsque vous n'avez pas d'accès direct à celui-ci. En maîtrisant les sélecteurs adjacents, vous pourrez rendre vos feuilles de style CSS plus dynamiques et réduire le besoin d'ajouter des classes HTML supplémentaires.

Voir plus

Questions fréquentes

Qu'est-ce que le sélecteur adjacent en CSS ?
Le sélecteur adjacent permet de cibler un élément qui est directement précédé d'un autre élément spécifique.
Pourquoi utiliser un sélecteur adjacent ?
Le sélecteur adjacent permet de styliser des éléments de manière efficace sans ajouter de classes supplémentaires au code HTML.
Comment cibler le deuxième élément <li> d'une liste non ordonnée ?
Utilisez le sélecteur adjacente li + li à l'intérieur d'un élément ul pour cibler le deuxième élément
  • .

    • Programme détaillé

    header 03:28
    nav 01:05
    main 01:22
    footer 01:06
    section 02:18
    aside 01:09
    article 04:21
    9 commentaires
    3,7
    9 votes
    5
    4
    3
    2
    1
    henridjithat
    Il y a 2 ans
    Parfait pour un débutant.
    geoffrey.monange
    Il y a 3 ans
    Excellent tout parait simple et logique à la fin !
    PASTRI49
    Il y a 3 ans
    Bravo! car sincèrement dans l'ensemble il y a un vrai travail de fond et surtout d'excellentes bases que vous nous dévoilez. Après bien évidemment à chacun de se créer son univers de progression à travers différentes recherches autres... mais ne soyons pas trop dur non plus au niveau d'exigences démesurées et reconnaissons quand même avec un minimum de correction la qualité d'ensemble de ce qui nous est dévoilé. Sincèrement moi j'ai apprécié cette formation, qui m'a quand même appris des choses que je ne connaissais pas dans la profondeur. Donc merci !
    jpe.beno
    Il y a 3 ans
    Bonjour, dans le site final, il y a les explications du html (ok pour moi) mais ou sont les vidéos pour expliquer le css du site final ?
    passprod_1
    Il y a 4 ans
    Les vidéos des cours css dans cette formation "apprendre le HTML 5" sont impossibles à suivre pour une personne débutante... Les exercices css ne sont pas dans le dossier à télécharger.
    allal73
    Il y a 4 ans
    Bonne formation , merci , svp je pense qu'il manque des cours au chapitre 11 c'est manquant, je n'ai aucune info sur cette épisode, vous passez directement sur un exercice dont nous n'avons pas traité merci de corrigé, je n'est pas tous fini ma formation cela m'a perturber énormément.
    lcerva38
    Il y a 4 ans
    Je confirme certains modules traite du css et pas du html.
    missant974
    Il y a 4 ans
    J'ai commencé à suivre ces vidéos qui sont de qualité, mais malheureusement certains modules ne correspondent pas au sujets abordés, erreur lors de l'upload. Exemple le module 16 traite du CSS et non pas du HTML.
    stephane.cade
    Il y a 4 ans
    Bonne formation. Je me demande s'il n'y a pas une anomalie au niveau du module 11. Une leçon manquante.J'ai eu le sentiment d'avoir manqué un épisode, alors que ce n'était pas le cas. Il me semble que c'était dans le module 11. Merci.