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

Question

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 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 <=> ... (à moins de thématiser le module de création de menu, ce que je préférerais ne pas faire).

Des idées?

Answer 1

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:

• Spécification de niveau 3 pour les sélecteurs
• Spéc. des sélecteurs CSS 2.1

En attendant, vous devrez recourir à JavaScript si vous devez sélectionner un élément parent.

La version préliminaire de travail du sélecteur de niveau 4 comprend une :has() pseudo-classe qui fonctionne de la même manière que la implémentation de jQuery . À compter de 2019, cette fonctionnalité n'est toujours prise en charge par aucun navigateur .

En utilisant <=> la question initiale pourrait être résolue avec ceci:

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

Answer 2

Je ne & # 8217; je ne pense pas que vous puissiez sélectionner le parent en css uniquement.

Mais comme vous semblez déjà avoir une .active classe, ne serait-il pas & # 8217; t-il plus facile de déplacer cette classe vers le li (au lieu du a)? De cette façon, vous pouvez accéder à la fois au <=> et au <=> via css uniquement.

Answer 3

Vous pouvez utiliser ce script .

*! > input[type=text] { background: #000; }

Ceci 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 existe de nombreuses autres fonctionnalités. Il suffit de consulter la documentation du plugin.

BTW, cela fonctionne dans IE.

Answer 4

Comme l'ont mentionné quelques autres personnes, il n'y a pas de moyen de nommer le / les parent (s) d'un élément en utilisant uniquement du CSS, mais ce qui suit fonctionne avec jQuery :

$("a.active").parents('li').css("property", "value");

Answer 5

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'au </body> pour déterminer si la page doit être rouge ou non.

Cet article Pourquoi nous n'avons pas de sélecteur de parents , explique-t-il détail.

Answer 6

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

li.active > a {
    property: value;
}

Answer 7

oui: :has()

prise en charge du navigateur: aucune

Answer 8

Essayez de passer de a à block l'affichage, puis utilisez le style de votre choix. li élément remplira <=> élément et vous pourrez modifier son apparence à votre guise. N'oubliez pas de définir <=> le remplissage à 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

Answer 9

Le sélecteur CSS & # 8220; Combinateur de sibling général & # 8221; pourrait peut-être utilisé pour ce que vous voulez:

E ~ F {
    property: value;
}

Ceci correspond à tout élément F précédé d'un E élément.

Answer 10

Pas en CSS 2 à ma connaissance. 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.

Answer 11

Je sais que l'OP cherchait une solution CSS, mais elle est simple à utiliser avec jQuery. Dans mon cas, je devais trouver la balise <ul> parent pour une balise <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 ayant un élément enfant avec l'id someId . Ou pour répondre à la question initiale, procédez comme suit (non testé):

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

Answer 12

Il s'agit de l'aspect le plus discuté de la spécification Sélecteurs de niveau 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 indiqué (!).

Par exemple:

body! a:hover{
   background: red;
}

définira une couleur de fond rouge si l'utilisateur survole une ancre.

Mais il faut attendre la mise en place des navigateurs: (

Answer 13

Vous pouvez essayer d’utiliser un lien hypertexte en tant que parent, puis de modifier les éléments internes en survol. Comme ceci:

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.

Answer 14

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 la focalisation à l'intérieur

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>

Answer 15

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%; }

Démo mise à jour et reste du code

Autre exemple : comment l'utiliser avec des entrées de texte - sélectionnez un groupe de champs parent

Answer 16

Il n’existe actuellement aucun sélecteur de parents & amp; 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 l'évaluation de CSS est effectuée .

Chris Coyier à propos des discussions du sélecteur de parents .

Harry Roberts à nouveau pour avoir écrit des 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.

Answer 17

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. C'est ce qu'on appelle EQCSS .

EQCSS ajoute notamment un sélecteur de parents. Cela fonctionne dans tous les navigateurs IE8 et plus. Voici le format:

@element 'a.active' {
  $parent {
    background: red;
  }
}

Nous avons donc ouvert une requête d'élément sur chaque élément a.active. Pour les styles contenus dans 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émonstration de $prev et une autre $this démonstration fonctionnant dans IE8 , ainsi que une capture d'écran si vous n'avez pas IE8 à tester .

EQCSS inclut également les méta-sélecteurs <=> pour l'élément situé avant un élément sélectionné, <= > uniquement pour les éléments qui correspondent à une requête d'élément, et plus encore.

Answer 18

Techniquement, il n’existe aucun moyen direct de procéder, mais vous pouvez trier cela à l’aide de jquery ou javascript.

Cependant, vous pouvez aussi faire quelque chose comme ça.

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value"); 

Si vous souhaitez utiliser jQuery, voici la référence du sélecteur de parents jQuery

Answer 19

Le W3C a exclu un tel sélecteur en raison de son impact énorme sur les performances d'un navigateur.

Answer 20

La réponse courte est NON , nous n'avons pas de parent selector à ce stade de CSS, mais si vous n'avez pas encore besoin d'échanger les éléments ou les classes, la deuxième option est la suivante: JavaScript, quelque chose 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 plus court si vous utilisez jQuery dans votre application:

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

Answer 21

Nous sommes en 2019 et le dernière version du module d'imbrication de CSS a en fait quelque chose comme ça. Présentation de @nest at-rules.

  

3.2. L'emboîtement de la règle: @nest

     

Bien que l’imbrication directe paraisse bien, elle est quelque peu fragile. Certains sélecteurs d'imbrication valides, tels que .foo & Et amp;, sont interdits 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 la nidification 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 quant à l'imbrication valide des règles de style. Sa syntaxe est la suivante:

     

@nest = @nest <selector> { <declaration-list> }

     

La règle @nest fonctionne de la même manière qu'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.

(copier et coller depuis 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; }
 */

Answer 22

Bien qu'il n'existe actuellement aucun sélecteur de parents dans les CSS standard, je travaille sur un projet (personnel) appelé ax (c'est-à-dire Syntaxe de sélecteur de CSS augmentée / ACSSSS ). qui, parmi ses 7 nouveaux sélecteurs, comprend à la fois:

1. un sélecteur parent immédiat < (qui active la sélection opposée à >)
2. un sélecteur d’ancêtres quelconque ^ (qui active la sélection opposée à [SPACE])

ax en est actuellement à un stade de développement relativement précoce, au stade BETA.

Voir une démo ici:

http://rounin.co.uk/projects/axe/axe2.html

(comparez les deux listes de gauche stylisées avec des sélecteurs standard et les deux listes de droite stylées avec des sélecteurs de hache)

Answer 23

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>

Answer 24

Au moins jusqu’à CSS3 inclus, vous ne pouvez pas sélectionner de la sorte. 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>

Answer 25

Non, vous ne pouvez pas sélectionner le parent en css uniquement.

Mais comme vous semblez déjà avoir une .active classe, ne serait-il pas & # 180; t-il plus facile de déplacer cette classe vers le li (au lieu du a)? De cette façon, vous pouvez accéder à la fois au <=> et au <=> via css uniquement.

Answer 26

C’est possible avec 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;
}

Answer 27

  

    

Des idées?

  

CSS 4 sera sophistiqué s’il ajoute des crochets dans marche arrière . Jusque-là, il est possible (bien que pas conseillé) d'utiliser checkbox et / ou radio input s pour rompre façon dont les choses sont connectées, et qui permettent également à CSS de fonctionner en dehors de sa portée normale ...

/* 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 MS 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 Arow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if ya 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 ya 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); /* MS!? */
}


/**
 * 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 ya 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>

... c'est joli brut mais avec CSS et HTML, il est possible de toucher et de toucher de nouveau n'importe quoi sauf le body et :root de n'importe où en reliant le id et for propriétés de label / : :checked s et de [checked] déclencheurs ; il est probable que quelqu'un montrera comment les toucher à un moment donné.

  

Une mise en garde supplémentaire est que seul un ::after d'un :hover spécifique peut être utilisé, le premier <=> / <=> gagne un état basculé dans un autre mots ... Mais plusieurs libellés peuvent pointer vers le même <=>, même si cela donnerait une apparence encore plus grossière au HTML et au CSS.

  

    

... J'espère qu'il existe une solution de contournement existante en CSS de niveau 2 ...

  

Je ne suis pas sûr des autres <=> sélecteurs, mais <=> pour les versions antérieures à CSS3, si je me souviens bien, était quelque chose comme <=>, raison pour laquelle vous pouvez le trouver dans le code ci-dessus, par exemple ...

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

... mais des choses comme <=> et <=> je ne suis pas du tout sûr de la version CSS utilisée pour la première fois.

Cela étant dit, veuillez ne jamais utiliser ceci en production, pas même en colère, comme une blague, ou simplement parce que quelque chose peut être fait ne signifie pas toujours devrait .

Answer 28

Je ferais appel à du code JS pour le faire. par exemple. dans ReactJS, 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 ensuite simplement:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Answer 29

@document

Bien que, techniquement, ce ne soit pas un sélecteur de parents, il vous permettra de sélectionner l'URL de la page qui correspond à peu près à & "parent &"; comme il devient. 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 lorsque 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. Toutefois, en sélectionnant 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 testez toujours votre code local avant de le déployer sur le serveur actif. 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, contrairement au vôtre. La plupart des gens qui trouveraient cette partie du message utile pourraient ne pas savoir comment l'aborder et tout dépend de la façon dont vous organisez votre environnement de travail.

1. Toujours exécuter votre environnement local sur RAID 1, 5, 6, 1 + 0 ou 0 + 1 (généralement confondu avec le & "RAID 10 &" inexistant et avec les +1 + 1 et 1+ 0 sont très différentes bêtes).
2. Ne stockez pas votre travail ( et fichiers personnels) sur le même lecteur que votre système d'exploitation. vous serez éventuellement en train de reformater, que vous soyez d'humeur ou non.
3. Votre chemin racine devrait ressembler à ceci (sur un serveur WAMP (Windows, Apache, MariaDB et PHP)): D:\Web\Version 3.2\www.example.com\.
4. En PHP, vous commencerez par votre $_SERVER['DOCUMENT_ROOT'] (vous pouvez déterminer un système d'exploitation Linux via if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} condition).
5. Vous conservez des copies d'anciennes versions, car vous devez en 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 Live 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 retourne deux parties de votre URL. L'URL racine de votre page d'accueil ou de votre site Web sera le / ainsi, environ / serait about/ une fois que vous explode ou split lors de la comparaison de chaînes. Cela vous prendra environ 80% du temps (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, seul 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 du module de règles conditionnelles CSS de niveau 3 . Le principal raisonnement selon lequel un CSS & Quot; sélecteur de parent réel & Quot; n'existe pas, c'est à cause de l'impact sur la performance; 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:

• https://developer.mozilla.org/en- US / docs / Web / CSS / @ document
• https://www.w3.org/TR/css3-conditional/< a>

Answer 30

La modification de l'élément parent en fonction de l'élément enfant peut se produire lorsque l'élément d'entrée est contenu dans l'élément parent. quand une entrée devient active, l'élément parent correspondant sera reflété en utilisant css.

L'exemple suivant vous fera comprendre comment utiliser :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>