visualizzare solo un particolare div [era: display]

[Maurizio1230]

Ciao a tutti,

Si può rendere *non visibile* (N.B. non mi riferisco a visibility:hidden) un div con id "bla" per mezzo di questo css:

#div.bla {
      display: none;
}

Ma come si può rendere un div (bla) non visibile ma lasciare visibile uno contenuto al suo interno (ok)
Prendete questo come esempio:

<div id="bla">
<div id="ok"></div>
<div id="bla2"></div>
<div id="bla3"></div>
</div>

Ovvero vorrei che bla, bla2, bla3 fossero non visibili ad esclusione di ok.
Spero di esser stato esauriente.
Grazie molte

[Mich_]

Una cosa di questo tipo?

#bla div {
  display: none;
}
#bla #ok {
  display: block;
}

[Maurizio1230]

il codice da te fornito funziona molto bene ma ha alcune limitazioni:

<div id="bla">
<span>span</span>

<div id="ok2"><div id="ok">ok</div></div>

<div id="bla2">bla2</div>
<div id="bla3">bla3</div>
</div>

#bla div,span {
  display: none;
}
#bla #ok {
  display: block;
}
#bla #ok2 {
  display: block;
}

Ogni volta che aggiungo un div come contenitore di uno principale (ovvero aggiungo ok2 come contenitore di ok), devo aggiungere nel css un altro display block per visualizzare "ok".
Confermi?
Inoltre si potrebbe includere l'ok2 nel display block precedente, evitando di arrivare a fare questo?:

#bla div,span {
  display: none;
}
#bla #ok {
  display: block;
}
#bla #ok2 {
  display: block;
}
#bla #ok3 {
  display: block;
}
#bla #ok4 {
  display: block;
}

Grazie molte per il tuo supporto

[Mich_]

Non riesco a capire il "rationale" di tutte queste elucubrazioni.

Comunque devi rivederti il capitolo sui selettori della tua guida CSS preferita, perche` mi sa che stai facendo errori di logica:

#bla div,span { ... }
Tutti i div dentro il blocco con id="bla" e tutti gli span (indipendentemente da dove stanno)

---
Comunque per semplificare la cosa, ti conviene usare le classi:

<div id="bla">
  <span>span</span>

  <div id="ok2" class="lovedo_block">
    <div id="ok" class="lovedo_block">ok</div>
  </div>
  <div id="ok3" class="lovedo_block">
    <span class="lovedo_inline">ok span</span>
  </div>



  <div id="bla2">bla2</div>
  <div id="bla3">bla3</div>
</div>

CSS:

#bla * {
  display: none;
}
#bla .lovedo_block {
  display: block;
}
#bla .lovedo_inline {
  display: inline;
}

MA se non devi usare IE, la cosa si semplifica, dato che puoi usare il selettore
figlio diretto
>

[Maurizio1230]

e come sarà il css se posso inserire soltanto un class lovedo_block in questo modo:

<div id="bla">
  <div id="ok2" class="lovedo_block">
    <div id="ok">ok</div>
    

</p>
    <table></table>
  </div>
</div>

ovvero inserirlo soltanto in ok2 e NON in ok, p table, ETC. (dunque TUTTI I POSSIBILI DISCENDENTI)

in modo che i discendenti siano visibili lo stesso?
Grazie molte

[Maurizio1230]

scusatemi se la semplificazione che ho attuato sul "codice reale" nei primi posts può essere fuorviante; il post precedente dovrebbe chiarire i miei propositi: (per la vostra curiosità) concretamente ho intenzione di non rendere visibili delle parti del printable version di mediawiki (dotato di un custom skin).