Existe-t-il un sélecteur de parent CSS?
Comment sélectionner l'élément <li> qui est un parent direct de l'élément d'ancrage?
Par exemple, mon CSS serait quelque chose comme ceci:
li < a.active {
property: value;
}
Évidemment, il y a moyen de faire cela avec JavaScript, mais j'espère qu'il existe une solution de contournement qui existe en natif au niveau 2 de CSS.
Le menu que j’essaie de styliser est créé par un CMS. Je ne peux donc pas déplacer l’élément actif sur l’élément <li> ... faire).
Des idées?
Il n'y a actuellement aucun moyen de sélectionner le parent d'un élément en CSS.
S'il y avait un moyen de le faire, ce serait dans l'une des spécifications actuelles du sélecteur CSS:
En attendant, vous devrez recourir à JavaScript si vous devez sélectionner un élément parent.
Le brouillon de travail de sélecteurs de niveau 4 inclut une pseudo-classe :has() qui fonctionne de la même manière que le implémentation de jQuery . À partir de 2019, ceci n'est toujours supporté par aucun navigateur.
En utilisant :has(), la question initiale pourrait être résolue avec ceci:
li:has(> a.active) { /* styles to apply to the li tag */ }
Je ne pense pas que vous puissiez sélectionner le parent en CSS uniquement.
Mais comme vous semblez déjà avoir une classe .active, il serait plus facile de déplacer cette classe vers la li (au lieu de la a). De cette façon, vous pouvez accéder à la fois à la li et à la a via CSS uniquement.
Vous pouvez utiliser ce script :
*! > input[type=text] { background: #000; }
Cela sélectionnera n'importe quel parent d'une entrée de texte. Mais attendez, il y a encore beaucoup plus. Si vous le souhaitez, vous pouvez sélectionner un parent spécifié:
.input-wrap! > input[type=text] { background: #000; }
Ou sélectionnez-le quand il est actif:
.input-wrap! > input[type=text]:focus { background: #000; }
Découvrez ce code HTML:
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
Vous pouvez sélectionner ce span.help lorsque le input est actif et l'afficher:
.input-wrap! .help > input[type=text]:focus { display: block; }
Il y a beaucoup plus de capacités; Il suffit de consulter la documentation du plugin.
BTW, cela fonctionne dans Internet Explorer.
Comme mentionné par quelques autres, il n'y a pas de moyen de styler le/les parent (s) d'un élément en utilisant uniquement CSS, mais les opérations suivantes fonctionnent avec jQuery :
$("a.active").parents('li').css("property", "value");
Il n'y a pas de sélecteur de parents; juste comme il n'y a pas de sélecteur de frère précédent. Une des bonnes raisons pour ne pas avoir ces sélecteurs est que le navigateur doit parcourir tous les enfants d'un élément pour déterminer si une classe doit ou non être appliquée. Par exemple, si vous avez écrit:
body:contains-selector(a.active) { background: red; }
Ensuite, le navigateur devra attendre jusqu'à ce qu'il ait chargé et tout analysé jusqu'au </body> pour déterminer si la page doit être rouge ou non.
L'article Pourquoi nous n'avons pas de sélecteur de parents l'explique en détail.
Il n'y a pas de moyen de faire cela dans CSS 2. Vous pouvez ajouter la classe au li et référencer le a:
li.active > a {
property: value;
}
Essayez de passer de a à block, puis utilisez le style de votre choix. L'élément a remplira l'élément li et vous pourrez modifier son apparence à votre guise. N'oubliez pas de définir li padding sur 0.
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
Le sélecteur CSS “ General Sibling Combinator ” pourrait peut-être être utilisé pour ce que vous voulez:
E ~ F {
property: value;
}
Cela correspond à n'importe quel élément F précédé d'un élément E.
Pas en CSS 2 pour autant que je sache. CSS 3 a des sélecteurs plus robustes mais n'est pas systématiquement appliqué sur tous les navigateurs. Même avec les sélecteurs améliorés, je ne crois pas que cela donnera exactement ce que vous avez spécifié dans votre exemple.
Je sais que l’OP cherchait une solution CSS, mais jQuery est simple à réaliser. Dans mon cas, je devais trouver la balise parent <ul> pour une balise <span> contenue dans l'enfant <li>. jQuery a le sélecteur :has afin qu'il soit possible d'identifier un parent par les enfants qu'il contient:
$("ul:has(#someId)")
sélectionnera l'élément ul qui a un élément enfant avec id someId. Ou, pour répondre à la question initiale, procédez comme suit (non testé):
$("li:has(.active)")
C'est l'aspect le plus discuté de la spécification Selectors Level 4. Avec cela, un sélecteur pourra mettre en forme un élément en fonction de son enfant en utilisant un point d'exclamation après le sélecteur donné (!).
Par exemple:
body! a:hover{
background: red;
}
définira une couleur de fond rouge si l'utilisateur passe au-dessus d'une ancre.
Mais nous devons attendre la mise en oeuvre des navigateurs :(
Vous pouvez essayer d'utiliser un lien hypertexte en tant que parent, puis modifier les éléments internes au survol. Comme ça:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
De cette façon, vous pouvez modifier le style dans plusieurs balises internes, en fonction du survol de l'élément parent.
Le pseudo-élément :focus-within permet à un parent d'être sélectionné si un descendant a le focus.
Un élément peut être ciblé s'il possède un attribut tabindex.
support du navigateur pour focus-inside
Exemple
.click {
cursor: pointer;
}
.color:focus-within .change {
color: red;
}
.color:focus-within p {
outline: 0;
}<div class="color">
<p class="change" tabindex="0">
I will change color
</p>
<p class="click" tabindex="1">
Click me
</p>
</div>Juste une idée de menu horizontal ...
Partie de HTML
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
Une partie de CSS
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
Mise à jour de la démo et du reste du code
Autre exemple comment l'utiliser avec des entrées de texte - sélectionnez un groupe de champs parent
Actuellement, il n'y a pas de sélecteur de parents et cela ne fait même pas l'objet de discussions dans les discussions du W3C. Vous devez comprendre comment le navigateur évalue les CSS pour savoir si nous en avons besoin ou non.
Il y a beaucoup d'explications techniques ici.
Jonathan Snook explique comment CSS est évalué .
Chris Coyier sur les discussions du sélecteur de parents .
Harry Roberts à nouveau sur l'écriture de sélecteurs CSS efficaces .
Mais Nicole Sullivan a des faits intéressants sur les tendances positives .
Ces personnes sont toutes de première classe dans le domaine du développement front-end.
Il existe un plugin qui étend CSS pour inclure des fonctionnalités non standard qui peuvent vraiment aider lors de la conception de sites Web. Cela s'appelle EQCSS .
EQCSS ajoute notamment un sélecteur de parents. Cela fonctionne dans tous les navigateurs, Internet Explorer 8 et plus. Voici le format:
@element 'a.active' {
$parent {
background: red;
}
}
Nous avons donc ouvert ici une requête d'élément sur chaque élément a.active, et pour les styles à l'intérieur de cette requête, des éléments tels que $parent ont un sens, car il existe un point de référence. Le navigateur peut trouver le parent, car il est très similaire à parentNode en JavaScript.
Voici une démo de $parent et ne autre démo $parent qui fonctionne dans Internet Explorer 8 , ainsi que ne capture d'écran au cas où vous n’avez pas Internet Explorer 8 à tester .
EQCSS inclut également méta-sélecteurs : $prev pour l'élément précédant un élément sélectionné et $this pour uniquement les éléments correspondant à une requête d'élément, et plus.
Techniquement, il n’existe aucun moyen direct de le faire. Cependant, vous pouvez résoudre ce problème avec jQuery ou JavaScript.
Cependant, vous pouvez faire quelque chose comme ça aussi.
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
Si vous voulez y parvenir en utilisant jQuery, voici la référence pour le sélecteur de parent jQuery .
Le W3C a exclu un tel sélecteur en raison de son impact énorme sur les performances d'un navigateur.
La réponse courte est NO; nous n'avons pas de parent selector à ce stade de CSS, mais si vous n'avez pas à échanger les éléments ou les classes, la deuxième option utilise JavaScript. Quelque chose comme ça:
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});
Ou un moyen plus court si vous utilisez jQuery dans votre application:
$('a.active').parents('li').css('color', 'red'); // Your property: value;
Nous sommes maintenant en 2019, et le dernière version du module d'imbrication CSS a effectivement quelque chose comme ceci. Présentation de @nest at-rules.
3.2. Le nid à la règle: @nest
Bien que la nidification directe paraisse agréable, elle est quelque peu fragile. Certains sélecteurs d'imbrication valides, tels que .foo &, ne sont pas autorisés et la modification du sélecteur de certaines manières peut rendre la règle invalide de manière inattendue. De plus, certaines personnes trouvent que la nidification est difficile à distinguer visuellement des déclarations environnantes.
Pour résoudre tous ces problèmes, cette spécification définit la règle @nest, qui impose moins de restrictions sur la manière d'imbriquer valablement des règles de style. Sa syntaxe est la suivante:
@nest = @nest <selector> { <declaration-list> }La règle @nest fonctionne de manière identique à une règle de style: elle commence par un sélecteur et contient des déclarations qui s'appliquent aux éléments auxquels le sélecteur correspond. La seule différence est que le sélecteur utilisé dans une règle @nest doit contenir un nid, ce qui signifie qu'il contient un sélecteur d'imbrication quelque part. Une liste de sélecteurs contient un nid si tous ses sélecteurs complexes individuels le sont.
(Copié et collé à partir de l'URL ci-dessus).
Exemple de sélecteurs valides selon cette spécification:
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/
Bien qu’il n’existe actuellement aucun sélecteur de parents dans les CSS standard, je travaille sur un projet (personnel) appelé ax (c.-à-d. CSS augmenté Syntaxe de sélecteur/ACSSSS) qui, parmi ses 7 nouveaux sélecteurs, comprend à la fois:
- un parent immédiat sélecteur
<(qui permet la sélection opposée à>) - un n'importe quel sélecteur d'ancêtre
^(qui permet la sélection opposée à[SPACE])
ax en est actuellement à un stade de développement relativement précoce.
Voir une démo ici:
http://rounin.co.uk/projects/axe/axe2.html
(comparez les deux listes de gauche avec les sélecteurs standard et les deux listes de droite avec les sélecteurs de hache)
Voici un hack utilisant pointer-events avec hover:
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: Fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>Au moins jusqu’à CSS 3 inclus, vous ne pouvez pas choisir comme ça. Mais cela peut être fait assez facilement de nos jours en JavaScript, il suffit d’ajouter un peu de JavaScript Vanilla, notez que le code est assez court.
cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
//console.log(el.nodeName)
if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
console.log(el)
};
});<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>C'est possible avec l'esperluette dans Sass :
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
Sortie CSS:
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
Non, vous ne pouvez pas sélectionner le parent en CSS uniquement.
Mais comme vous semblez déjà avoir une classe .active, il serait plus facile de déplacer cette classe vers la li (au lieu de la a). De cette façon, vous pouvez accéder à la fois à la li et à la a via CSS uniquement.
Des idées?
CSS 4 sera sophistiqué s’il ajoute quelques crochets dans en marche arrière . Jusque-là, il est possible (bien que pas souhaitable) d'utiliser checkbox et/ou radioinputs pour briser la manière habituelle de connecter les éléments, et ainsi permettre à CSS de fonctionner en dehors de son champ d'application normal ...
/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0); /* Old Microsoft opacity */
}
/* Base style for content and style menu */
.main__content {
background-color: lightgray;
color: black;
}
.menu__hidden {
background-color: black;
color: lightgray;
/* Make list look not so _listy_ */
list-style: none;
padding-left: 5px;
}
.menu__option {
box-sizing: content-box;
display: block;
position: static;
z-index: auto;
}
/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
content: '\2630';
display: inline-block;
}
*/
/* ▼ - Down Arrow */
.menu__trigger__selection::after {
content: "\25BC";
display: inline-block;
transform: rotate(90deg);
}
/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
cursor: pointer;
background-color: darkgray;
color: white;
}
/**
* Things to do when checkboxes/radios are checked
*/
.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
transform: rotate(0deg);
}
/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100); /* Microsoft!? */
}
/**
* Hacky CSS only changes based off non-inline checkboxes
* ... AKA the stuff you cannot unsee after this...
*/
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
background-color: lightgray;
color: black;
}
.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
color: darkorange;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
background-color: black;
color: lightgray;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
color: darkorange;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
background-color: darkgreen;
color: red;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
color: darkorange;
}<!--
This bit works, but will one day cause troubles,
but truth is you can stick checkbox/radio inputs
just about anywhere and then call them by id with
a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-default">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-one">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-two">
<div class="main__content">
<p class="paragraph__split">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<input type="checkbox"
class="menu__checkbox__selection"
id="trigger-style-menu">
<label for="trigger-style-menu"
class="menu__trigger__selection"> Theme</label>
<ul class="menu__hidden">
<li class="menu__option">
<label for="style-default"
class="menu__trigger__style">Default Style</label>
</li>
<li class="menu__option">
<label for="style-one"
class="menu__trigger__style">First Alternative Style</label>
</li>
<li class="menu__option">
<label for="style-two"
class="menu__trigger__style">Second Alternative Style</label>
</li>
</ul>
<p class="paragraph__split">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>... joli brut , mais avec seulement CSS et HTML, il est possible de toucher et de retoucher autre chose que le body et :root de presque n'importe où en reliant les propriétés id et for de radio/checkboxinputs et label déclenche ; il est probable que quelqu'un montrera comment les toucher à un moment donné.
Une mise en garde supplémentaire est que seul n
inputd’unidspécifique peut être utilisé, d’abordcheckbox/radiogagne un état basculé en d'autres termes ... Mais plusieurs étiquettes peuvent toutes pointer vers le mêmeinput, bien que cela rendrait les codes HTML et CSS semble encore plus grossier.... J'espère qu'il existe une solution de contournement existante dans CSS Level 2 ...
Je ne suis pas sûr des autres sélecteurs :, mais je :checked pour les versions antérieures à CSS 3. Si je me souviens bien, c'était quelque chose comme [checked], raison pour laquelle vous pouvez le trouver dans le fichier. code ci-dessus, par exemple,
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
/* rules: and-stuff; */
}
... mais pour des choses comme ::after et :hover, je ne suis pas du tout certain de la version CSS de ces versions.
Cela dit, veuillez ne jamais utiliser ceci en production, pas même en colère. En plaisantant, ou simplement parce que quelque chose peut être fait ne signifie pas toujours que devrait .
@document
Bien que ce ne soit techniquement pas un sélecteur de parent, il vous permettra de sélectionner l'URL de la page qui est à peu près aussi "parent" que possible. N'oubliez pas que vous devrez faire un plaidoyer en ce sens (voir les instructions au bas de cet article). Je mettrai à jour ce post une fois que cette méthode sera viable pour les auteurs Web.
Supposons que vous souhaitiez changer le background-image de l'en-tête de navigation pour chaque page. Votre code HTML ressemblerait généralement à ce qui suit:
<body>
<main id="about_"></main>
<header><nav></nav></header>
</body>
L'ajout d'un attribut id aux éléments head et body n'est pas professionnel et n'est pas conforme à Web 3.0. Cependant, en sélectionnant le URL, vous n’aurez à ajouter de code HTML dans aucun sens:
@document url('https://www.example.com/about/')
{
body > header
{
background-image: url(about.png);
}
}
Parce que vous êtes un professionnel (vous l'êtes, n'est-ce pas?) Vous toujours testez votre code local avant de le déployer sur le serveur live. Ainsi, les URL statiques ne fonctionneront pas sur localhost, 127.0.0.1, :1 et ainsi de suite - par défaut . Cela implique que si vous voulez tester et vérifier votre code avec succès, vous devrez exécuter un script côté serveur sur votre CSS. Cela implique également que si vous autorisez les utilisateurs à exécuter du CSS sur votre site, vous devez vous assurer que leur code CSS ne peut pas exécuter de script côté serveur, bien que le vôtre puisse le faire. . La plupart des gens qui trouveraient cette partie du message utile ne savent peut-être pas comment l'aborder et tout se résume à la façon dont vous organisez votre environnement de travail.
- Exécutez toujours votre environnement local sur RAID 1, 5, 6, 1 + 0 ou 0 + 1 (généralement confondu avec le "RAID 10" inexistant et 0 + 1 et 1 + 0: très bêtes différentes).
- Ne stockez pas votre travail ( et fichiers personnels) sur le même lecteur que votre système d'exploitation; vous serez éventuellement reformaté, que vous soyez d'humeur ou non.
- Votre chemin racine devrait ressembler à quelque chose comme ceci (sur un serveur WAMP (Windows, Apache, MariaDB et PHP)):
D:\Web\Version 3.2\www.example.com\. - Dans PHP, vous commencerez par votre
$_SERVER['DOCUMENT_ROOT'](vous pourrez déterminer un système d’exploitation Linux via la conditionif (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}.). - Vous conservez des copies d'anciennes versions, car vous devez voir des copies de travail au cas où vous auriez oublié et foutu quelque chose, d'où le contrôle de version.
Ce qui suit suppose que votre serveur actif utilise www. ( https://www.example.com/ au lieu de https://example.com/ ):
<?php
if (!isset($_SERVER['HTTP_Host']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
//Get the domain name.
if (substr($_SERVER['HTTP_Host'],0,4) === 'www.')
{//Live Server
$p0 = explode('www.',$_SERVER['HTTP_Host'],2);
$domain = $p0[1];
}
else
{//localhost
$p0 = explode('www.',$_SERVER['REQUEST_URI']);
if (isset($p0[2]))
{
$p1 = explode('/',$p0[2],2);
$domain = $p1[0];
}
else
{
$p1 = explode('/',$p0[1],2);
$domain = $p1[0];
}
}
//Now reconstruct your *relative* URL.
if (isset($_SERVER['HTTPS'])) {$https = 'https';}
else {$https = 'http';}
$p0 = explode('www.',$_SERVER['HTTP_Host']);
if (stristr($_SERVER['HTTP_Host'],'www.'))
{
$a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
}
else
{
$dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);
if ($_SERVER['HTTP_Host']=='localhost' || $_SERVER['HTTP_Host']==$_SERVER['SERVER_NAME'])
{
$p0 = explode($domain,$_SERVER['REQUEST_URI']);
$a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
}
else if (substr($_SERVER['HTTP_Host'],0,7)=='192.168' || substr($_SERVER['HTTP_Host'],0,4)=='127.')
{
$p0 = explode($domain,$_SERVER['REQUEST_URI']);
$a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
}
}
print_r($a);
}
?>
Le $a renverra deux parties de votre URL. L'URL racine de votre page d'accueil ou de votre site Web sera le / donc, à propos de/serait about/ une fois que vous explode ou split lors de la comparaison de chaînes. Cela vous prendra environ 80% du chemin (pour les tests en local et en direct) afin que vous puissiez exécuter le même code dans les deux environnements et l'utiliser dans le CSS pour reconstruire les URL.
Prise en charge du navigateur
À partir de 2019 uniquement Gecko 61+ prend en charge cette fonctionnalité et uniquement derrière un drapeau. J'ai déjà préconisé qu'il devienne utilisable par les auteurs Web. David Baron est l'auteur de module de règles conditionnelles CSS de niveau 3 . Le principal raisonnement selon lequel un "sélecteur de parents" CSS n'existe pas est lié à l'impact sur les performances; cette méthode annulerait l'impact sur les performances. J'ai également préconisé que les URL relatives soient prises en charge en présence de l'élément HTML base. Si vous lisez ceci peu de temps après 2019 (bonjour à tous en 47 632!), Veuillez d'abord faire référence aux URL suivantes:
J'engagerais du code JavaScript pour le faire. Par exemple, dans React lorsque vous parcourez un tableau, ajoutez une autre classe au composant parent, ce qui indique qu'il contient vos enfants:
<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
{hasKiddos && kiddos.map(kid => (
<div key={kid.id} className="kid">kid</div>
))}
</div>
Et puis simplement:
.parent {
color: #000;
}
.parent.has-kiddos {
color: red;
}
La modification de l'élément parent en fonction de l'élément enfant ne peut actuellement se produire que si nous avons un élément <input> à l'intérieur de l'élément parent. Lorsqu'une entrée obtient le focus, l'élément parent correspondant peut être affecté à l'aide de CSS.
L'exemple suivant vous aidera à comprendre l'utilisation de :focus-within en CSS.
.outer-div {
width: 400px;
height: 400px;
padding: 50px;
float: left
}
.outer-div:focus-within {
background: red;
}
.inner-div {
width: 200px;
height: 200px;
float: left;
background: yellow;
padding: 50px;
}<div class="outer-div">
<div class="inner-div">
I want to change outer-div(Background color) class based on inner-div. Is it possible?
<input type="text" placeholder="Name" />
</div>
</div>