universale - selettori css w3c




C'è un selettore genitore CSS? (18)

Come seleziono l'elemento <li> che è un elemento principale diretto dell'elemento anchor?

Ad esempio il mio CSS sarebbe qualcosa del genere:

li < a.active {
    property: value;
}

Ovviamente ci sono modi per farlo con JavaScript, ma spero che esista una soluzione alternativa al livello 2 di CSS.

Il menu che sto cercando di creare è stato emesso da un CMS, quindi non posso spostare l'elemento attivo nell'elemento <li> ... (a meno che non tocchi il modulo di creazione dei menu che preferirei non fare).

Qualche idea?


È possibile con la e commerciale in SASS:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

Uscita CSS:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Al momento non esiste alcun modo per selezionare il genitore di un elemento in CSS.

Se ci fosse un modo per farlo, sarebbe in una delle attuali specifiche dei selettori CSS:

Nel frattempo, dovrai ricorrere a JavaScript se devi selezionare un elemento genitore.

La bozza di lavoro Selectors Level 4 include una pseudo-classe :has() che funziona come l' implementazione jQuery . A partire dal 2018, questo non è ancora supportato da alcun browser .

Utilizzando :has() la domanda originale potrebbe essere risolta con questo:

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

Anche se al momento non esiste un selettore genitore nel CSS standard, sto lavorando a un progetto (personale) chiamato ax (cioè Sintassi del selettore CSS / ACSSSS aumentata ) che, tra i suoi 7 nuovi selettori, include entrambi:

  1. un selettore genitore immediato < (che abilita la selezione opposta a > )
  2. un qualsiasi selettore di antenati ^ (che abilita la selezione opposta a [SPACE] )

ax è attualmente in uno stadio di sviluppo BETA relativamente precoce.

Guarda una demo qui:

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

(confronta i due elenchi a sinistra con i selettori standard e i due elenchi a destra con i selettori ax)


Attualmente non esiste un selettore genitore e non è nemmeno in discussione in nessuno dei discorsi del W3C. Devi capire come il CSS viene valutato dal browser per capire veramente se ne abbiamo bisogno o no.

C'è un sacco di spiegazioni tecniche qui.

Jonathan Snook spiega come viene valutato il CSS .

Chris Coyier sui discorsi del selezionatore dei genitori .

Harry Roberts di nuovo sulla scrittura di selettori CSS efficienti .

Ma Nicole Sullivan ha alcuni fatti interessanti sulle tendenze positive .

Queste persone sono tutte di prima classe nel campo dello sviluppo front-end.


Come accennato da un paio di altri, non c'è un modo per disegnare i genitori di un elemento usando solo CSS, ma quanto segue funziona con jQuery :

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

Ecco un trucco usando gli pointer-events con 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>


Il selettore CSS " General Sibling Combinator " potrebbe forse essere usato per quello che vuoi:

E ~ F {
    property: value;
}

Questo corrisponde a qualsiasi elemento F preceduto da un elemento E


Lo pseudo elemento :focus-within consente a un genitore di essere selezionato se un discendente ha il focus.

Un elemento può essere focalizzato se ha un attributo tabindex .

Supporto per browser per focus-inside

Tabindex

Esempio

.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>


No, non puoi selezionare il genitore solo in css.

Ma poiché sembra che tu abbia già una classe .active , non sarebbe più facile spostare quella classe sul li (anziché sulla a )? In questo modo è possibile accedere sia a li sia a solo via CSS.


Non esiste un selettore genitore; proprio come non esiste un precedente selettore fratello. Una buona ragione per non avere questi selettori è perché il browser deve attraversare tutti i figli di un elemento per determinare se una classe debba essere applicata o meno. Ad esempio se hai scritto:

body:contains-selector(a.active) { background: red; }

Quindi il browser dovrà attendere fino a quando non avrà caricato e analizzato tutto fino a </body> per determinare se la pagina debba essere rossa o meno.

Questo articolo, perché non abbiamo un selettore genitore, lo spiega in dettaglio.


Non penso che tu possa selezionare il genitore solo in css.

Ma poiché sembra che tu abbia già una classe .active , non sarebbe più facile spostare quella classe sul li (invece che sulla a )? In questo modo è possibile accedere sia a li sia a solo via CSS.


Potresti provare a utilizzare il collegamento ipertestuale come genitore e quindi modificare gli elementi interni al passaggio del mouse. Come questo:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

In questo modo è possibile modificare lo stile in più tag interni, in base al rollover dell'elemento padre.


Puoi usare questo script .

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

Questo selezionerà qualsiasi genitore di un input di testo. Ma aspetta, c'è ancora molto altro. Se lo desideri, puoi selezionare un genitore specificato:

.input-wrap! > input[type=text] { background: #000; }

o selezionalo quando è attivo:

.input-wrap! > input[type=text]:focus { background: #000; }

Dai un'occhiata a questo HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

puoi selezionare span.help quando l' input è attivo e mostrarlo:

.input-wrap! .help > input[type=text]:focus { display: block; }

Ci sono molte più funzionalità; basta controllare la documentazione del plugin.

A proposito, funziona in IE.


Qualcuno ha suggerito qualcosa di simile? Solo un'idea per il menu orizzontale ...

parte dell'HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

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

Demo aggiornata e il resto del codice

Un altro esempio su come usarlo con gli input di testo: selezionare il fieldset principale


Risposta breve è NO , non abbiamo un parent selector in questa fase in CSS, ma se non hai comunque lo scambio di elementi o classi, la seconda opzione utilizza JavaScript, qualcosa del genere:

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

o un modo più breve se usi jQuery nella tua applicazione:

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

So che l'OP stava cercando una soluzione CSS ma è semplice ottenere usando jQuery. Nel mio caso avevo bisogno di trovare il <ul> tag principale per un tag <span> contenuto nel figlio <li> . jQuery ha il selettore :has quindi è possibile identificare un genitore dai figli che contiene:

$("ul:has(#someId)")

selezionerà l'elemento ul che ha un elemento figlio con id someId . O per rispondere alla domanda originale, qualcosa come il seguente dovrebbe fare il trucco (non testata):

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

non c'è un modo per farlo in css2. è possibile aggiungere la classe al file Li e fare riferimento a a

li.active > a {
    property: value;
}





css-selectors