CSS: selettore elemento "padre" senza figli?

**webtemplum** · 03-07-2012, 20:56

Scusate il titolo un po' contorto...
Mettiamo che abbiamo questo codice:

Codice PHP:


<div class="contenuto">

<article>

    <h1>Titolo</h1>

    

Testo</p>

</article>

<article>

    <ul>[*]Link esterno[/list]

</article>

</div>

Se volessimo flottare i due article, potremmo ad esempio

Codice PHP:


.contenuto > article { float: left; width: 610px; margin-right: 25px; }

.contenuto > article + article { width: 280px; margin-left: 25px; }

Fin qui nessun problema....

Se pero' in un'altra pagina avessimo solo il primo article e volessimo renderlo non flottante... Come è possibile farlo senza dover per forza dargli una classe?

E' possibile modificare il css in maniera che invece di prendere il fratello si possa dire "se c'è solo un article allora è "widht: 100%; display: block"?

Spero di essere stato chiaro... grazie in anticipo!

**KillerWorm** · 03-07-2012, 21:41

In CSS3 esiste il selettore only-child che seleziona un elemento che è figlio unico dell'elemento padre.

Il tuo css dovrebbe diventare una cosa del genere:

codice:

.contenuto > article {float:left; width:610px; margin-right:25px;}
.contenuto > article + article {width:280px; margin-left:25px;}
.contenuto > article:only-child {clear:left; margin-right:0; width:100%; display:block;}

In questo caso se c'è solo un article dentro .contenuto allora vengono applicate le regole della prima e dell'ultima riga. In realtà le regole che servono per il singolo articolo vengono sovrascritte da quelle scritte nell'ultima riga. Per questo ho dovuto inserire clear:left; margin-right:0;.

Vedi se può andare.

**webtemplum** · 03-07-2012, 21:53

Grazie inanto per avermi messo sulla buona strada...
non sono riuscito a farlo funzionare, nemmeno in mozilla (che sembra l'unico che lo supporti tra l'altro)
ergo mi sa che una "class" mi tocca per forza usarla (anche se per alcuni esperimenti stavo provando a fare css sempre più "concisi" con l'utilizzo di pochissime classi e tanti attributi padri figli etc etc

)

grazie ancora, rinuncio al momento

(a meno di altre idee!)

**KillerWorm** · 03-07-2012, 23:54

A me funziona su vista con FF12, IE8, Chrome.
A meno che io abbia inteso male.
Ti posto la prova che ho fatto:

codice:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS only-child</title>
    
    <style type="text/css">
      .contenuto {float:left; width:100%; margin:0 0 20px}
      .contenuto article{border:1px #090 solid;}

      .contenuto > article {float:left; width:610px; margin-right:25px;}
      .contenuto > article + article {width:280px; margin-left:25px;}
      .contenuto > article:only-child {clear:left; margin-right:0; width:100%; display:block;}
    </style>
  
  </head>
  <body>
  
    

DIV con 2 figli article</p>
    
    <div class="contenuto">
      <article>
        <h1>Articolo 1</h1>
        

Testo</p>
      </article>
      <article>
        <h1>Articolo 2</h1>
        <ul>[*]Link esterno[/list]
      </article>
    </div>

    

DIV con un solo figlio article</p>
    
    <div class="contenuto">
      <article>
        <h1>Articolo unico</h1>
        

Testo</p>
      </article>
    </div>
    
  </body>
</html>

Tieni conto che il selettore only-child funziona solo se dentro il div è presente un unico elemento figlio. Cioè oltre l'elemento <article> non dovrà esserci nient'altro allo stesso livello.

Inoltre ho aggiunto qualche regola giusto per rendere presentabile l'esempio. Su ".contenuto" ho messo un float dato che lo stai applicando anche a degli elementi figli ma potrebbe essere omesso in base a come vuoi che siano impaginati gli altri elementi che avrai sulla pagina.

Questo selettore funziona, poi vedi tu se pensi sia più semplice applicare delle classi.

**webtemplum** · 04-07-2012, 06:46

Hai ragione...
purtroppo non è l'unico figlio... indi non posso seguire questa strada...
Cmq ho imparato una cosa nuova... grazie mille!

Discussione: CSS: selettore elemento "padre" senza figli?

Strumenti discussione

Ricerca discussione

Visualizza

CSS: selettore elemento "padre" senza figli?

Permessi di invio