2024-11-19 13:49:39 +01:00
|
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
:ID: 83958324-e37b-4811-b120-a30c924af434
|
|
|
|
:END:
|
|
|
|
|
|
|
|
#+title: problme-avec-le-slecteur-css-last-child
|
|
|
|
#+post_ID: 268
|
|
|
|
#+post_slug: problme-avec-le-slecteur-css-last-child
|
|
|
|
#+post_url: https://www.ciperbliss.com/2013/problme-avec-le-slecteur-css-last-child
|
|
|
|
#+post_title: Problème avec le sélecteur CSS :last-child
|
2024-11-19 23:50:42 +01:00
|
|
|
#+post_tags:
|
2024-11-19 13:49:39 +01:00
|
|
|
#+post_type: post
|
|
|
|
#+post_mime_types:
|
|
|
|
#+post_guid: undefined
|
|
|
|
#+post_status: publish
|
|
|
|
#+post_date_published: <2013-05-03T13:57:33>
|
|
|
|
#+post_date_modified: <2013-05-03T13:57:33>
|
|
|
|
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
|
|
|
|
#+retrieved_from_db_at: <2024-11-18 16:25:08>
|
|
|
|
|
|
|
|
|
|
|
|
* Problème avec le sélecteur CSS :last-child
|
|
|
|
:PROPERTIES:
|
|
|
|
:CUSTOM_ID: problème-avec-le-sélecteur-css-last-child
|
|
|
|
:END:
|
|
|
|
|
|
|
|
[[http://lacantine-stbrieuc.org/wp-content/uploads/2013/02/css3.png]]
|
|
|
|
|
|
|
|
|
|
|
|
Peut être vous êtes vous déjà demandé pourquoi votre sélecteur
|
|
|
|
:last-child ne ciblait pas le dernier élément de la classe que vous lui
|
|
|
|
avez passé. Nous avons explication: c'est parce que ce sélecteur se base
|
|
|
|
sur l'élément où s'applique la classe, et qu'il choisit le dernier
|
|
|
|
élément.Admettons que nous ayons ce code HTML
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_example
|
|
|
|
mon item mon item 2 mon item 3 mon item 4
|
|
|
|
#+end_example
|
|
|
|
|
|
|
|
|
|
|
|
et ce code CSS pour avoir en fond rouge le derner .panel.
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
#+begin_example
|
|
|
|
.panel:last-child{ background: red;}
|
|
|
|
#+end_example
|
|
|
|
|
|
|
|
|
|
|
|
Surprise, aucun élément .panel n'a de fond rouge, et surtout pas le
|
|
|
|
dernier (4e enfant de
|
|
|
|
|
|
|
|
).Il semblerait que c'est un bug CSS non résolu à ce
|
|
|
|
jour, et que comme le dernier div n'est pas de la class panel, il ne
|
|
|
|
soit ciblé, et ne renvoie pas un test concluant. Donc, n'applique pas le
|
|
|
|
style demandé.
|
|
|
|
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
Et oui jammy, même dans Chrome supportant parfaitement le
|
|
|
|
CSS3.Cependant, je suis toute ouïe si vous avez une
|
|
|
|
meilleure explication.
|
|
|
|
|
2024-11-19 23:50:42 +01:00
|
|
|
|
2024-11-19 13:49:39 +01:00
|
|
|
|