form - selecteur css parent




Existe-t-il un sélecteur de parent CSS? (18)

Actuellement, il n'y a pas de sélecteur de parent et cela n'est même pas discuté 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 la classe supérieure dans le domaine du développement front-end.

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 dans CSS Level 2.

Le menu que j'essaie de styliser est créé par un CMS. Je ne peux donc pas déplacer l'élément actif vers l'élément <li> ... (à moins de thématiser le module de création de menus, ce que je préférerais ne pas faire).

Des idées?


Au moins jusqu’à CSS3 inclus, vous ne pouvez pas choisir comme ça. Mais cela peut être fait assez facilement de nos jours dans JS, il suffit d’ajouter un peu de JavaScript vanillé, 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 l'aspect le plus discuté de la spécification Selectors Level 4 . Avec ce sélecteur, vous pourrez styliser 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 œuvre des navigateurs :(


C'est possible avec l'esperluette en 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;
}

En CSS, nous pouvons nous aligner sur les propriétés dans la hiérarchie, mais pas dans le sens opposé. Pour modifier le style parent sur l'événement enfant, utilisez probablement jQuery.

$el.closest('.parent').css('prop','value');

Essayez de changer l’affichage pour block affichage, puis utilisez le style de votre choix. a élément remplira un élément 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: ...
}

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 Selectors Level 4 inclut une pseudo-classe :has() qui fonctionne de la même manière que l' implémentation de jQuery . À compter de 2018, aucun navigateur ne la prend en charge .

En utilisant :has() la question initiale pourrait être résolue avec ceci:

li:has(> a.active) { /* styles to apply to the li tag */ }

Il n'y a pas de sélecteur de parent; juste comme il n'y a pas de sélecteur de frère précédent. Une des bonnes raisons de 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'à ce que </body> détermine si la page doit être rouge ou non.

Cet article Pourquoi nous n'avons pas de sélecteur de parents l' explique en détail.


Je sais que l’OP cherchait une solution CSS, mais jQuery est simple à utiliser. Dans mon cas, je devais trouver la <ul> parent pour une <span> contenue dans l'enfant <li> . jQuery a le sélecteur :has donc il est 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 l'id someId . Ou pour répondre à la question d'origine, procédez comme suit (non testé):

$("li:has(.active)")

La réponse courte est NON , nous n’avons pas de parent selector à ce stade de CSS, mais si vous n’avez de toute façon pas à échanger les éléments ou les classes, la deuxième option utilise JavaScript, comme ceci:

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 une manière plus courte si vous utilisez jQuery dans votre application:

$('a.active').parents('li').css('color', 'red'); //your property: value;

Le pseudo-élément :focus-within permet de sélectionner un parent si un descendant a le focus.

Un élément peut être ciblé s'il possède un attribut tabindex .

Prise en charge du navigateur pour focus-inside

Tabindex

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>


Le sélecteur CSS “ General Sibling Combinator ” peut éventuellement être utilisé pour ce que vous voulez:

E ~ F {
    property: value;
}

Cela correspond à tout é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.


Quelqu'un a-t-il suggéré quelque chose comme ça? 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>

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 d'utilisation des entrées de texte - sélectionnez le groupe de champs parent


Voici un hack utilisant pointer-events avec le 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>


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.


il n'y a pas moyen de faire cela en CSS2. vous pouvez ajouter la classe à la li et référencer le un

li.active > a {
    property: value;
}





css-selectors