Pure css Scacchiera con div e no classi o id, è possibile?

Question

Ho il seguente layout

<div id="chess"> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div> 

E 'possibile effettuare una scacchiera utilizzando solo i CSS e senza cambiare il sopra html? Ciò significa niente classi o id. Ho cercato idee per un periodo di 2 giorni. Ho provato con nth-child() e alcune varianti ma senza successo.

Sono molto curioso se questo può essere fatto. È stato dato come un incarico a qualcuno.

Quindi, per favore, qualche idea?

Answer 1

Non c'è bisogno di codificare ogni :nth-child(). Ecco un modo per accorciarlo. Ogni selettore corrisponde ad una riga sulla scacchiera:

#chess div:nth-child(-2n+8), 
#chess div:nth-child(8) ~ div:nth-child(-2n+15), 
#chess div:nth-child(16) ~ div:nth-child(-2n+24), 
#chess div:nth-child(24) ~ div:nth-child(-2n+31), 
#chess div:nth-child(32) ~ div:nth-child(-2n+40), 
#chess div:nth-child(40) ~ div:nth-child(-2n+47), 
#chess div:nth-child(48) ~ div:nth-child(-2n+56), 
#chess div:nth-child(56) ~ div:nth-child(-2n+63) { 
    background-color: #000; 
} 

jsFiddle preview

Answer 2

naturalmente può essere fatto ...

body { 
    background-image: 
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%), 
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%); 
    background-image: 
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%), 
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%); 
    -moz-background-size:100px 100px; 
    background-size:100px 100px; 
    -webkit-background-size:101px 101px; 
    background-position:0 0, 50px 50px; 
} 

Answer 3

Non è possibile utilizzare nth-child(odd) o nth-child(even) Per colorare le piazze, perché non tutto il "dispari" o "addirittura" piazze sono dello stesso colore. Conteggio in alto a sinistra come posizione "1", i quadrati bianchi della prima riga sarebbero 1, 3, 5, 7. Continuando nella seconda riga, i quadrati bianchi sarebbero 10, 12, 14, 16. La terza riga sarebbe tornare ai numeri dispari, 17, 19, 21, e 23.

Si potrebbe quindi manualmente colore ogni quadrato come segue:

#chess { 
    /* 8 squares at 30x30px per square */ 
    width: 240px; 
    height:240px; 
    background:#000; 
} 

#chess div { 
    width:30px; 
    height:30px; 
    float:left; 
} 

#chess div:nth-child(1), /* first row */ 
#chess div:nth-child(3), 
#chess div:nth-child(5), 
#chess div:nth-child(7), 
#chess div:nth-child(10), /* second row */ 
#chess div:nth-child(12), 
#chess div:nth-child(14), 
#chess div:nth-child(16) 
/* ... up to 64 ... */ 
{ 
    background:#fff; 
} 

Answer 4

Done. Esempio: http://jsfiddle.net/LFVQU/1/

<style type="text/css"> 
    #chess{ 
    width:800px; 
    height:800px; 
    border:1px; 
    border:1px solid #999; 
    } 
    #chess div{ 
    width:100px; 
    height:100px; 
    float:left; 
    } 
#chess div{background: #fff} 
#chess div:nth-child(1), #chess div:nth-child(3), #chess div:nth-child(5), #chess div:nth-child(7), 
#chess div:nth-child(10), #chess div:nth-child(12), #chess div:nth-child(14), #chess div:nth-child(16), 
#chess div:nth-child(17), #chess div:nth-child(19), #chess div:nth-child(21), #chess div:nth-child(23), 
#chess div:nth-child(26), #chess div:nth-child(28), #chess div:nth-child(30), #chess div:nth-child(32), 
#chess div:nth-child(33), #chess div:nth-child(35), #chess div:nth-child(37), #chess div:nth-child(39), 
#chess div:nth-child(42), #chess div:nth-child(44), #chess div:nth-child(46), #chess div:nth-child(48), 
#chess div:nth-child(49), #chess div:nth-child(51), #chess div:nth-child(53), #chess div:nth-child(55), 
#chess div:nth-child(58), #chess div:nth-child(60), #chess div:nth-child(62), #chess div:nth-child(64) 
{ 
    background-color:#000; 
} 
</style> 

Answer 5

Il seguente metodo fa uso del fatto che il modello di colorazione ripete ogni 16 quadrati (contando da sinistra in alto a destra in basso). Quindi, la prima regola #chess div:nth-child(16n+1) colora i quadrati 1,17,33 e 49 (in altre parole, "la prima colonna"). Questo viene ripetuto con regole aggiuntive per tutti i quadrati colorati da 3 a 16, ognuno dei quali rappresenta una colonna separata.

Con la data di marcatura, non importa se si utilizza nth-of-type o nth-child, ma con markup ulteriore potrebbe, quindi nth-child è una specie di scelta più evidente.

for(i=0;i<64;i++){chess.appendChild(document.createElement("div"))}

#chess div{ 
 
    width:22px;height:22px;border:1px solid black; 
 
    float:left; 
 
} 
 

 
#chess div:nth-of-type(16n+16), 
 
#chess div:nth-of-type(16n+14), 
 
#chess div:nth-of-type(16n+12), 
 
#chess div:nth-of-type(16n+10), 
 
#chess div:nth-of-type(16n+7), 
 
#chess div:nth-of-type(16n+5), 
 
#chess div:nth-of-type(16n+3), 
 
#chess div:nth-of-type(16n+1){ 
 
    background-color:black; 
 
} 
 

 
#chess div:nth-of-type(8n+1){ 
 
    clear:left; 
 
}

<div id="chess"></div>

Answer 6

Questo è un problema interessante. Penso che una scacchiera sia meglio espressa come una tabella che come una serie di div, in quanto uno screen reader dovrebbe dettare le righe e le colonne in cui si trovano le figure. Con una tabella:

table tr:nth-child(odd) td:nth-child(even) { 
    background: #000; 
} 
table tr:nth-child(even) td:nth-child(odd) { 
    background: #000; 
} 

http://jsfiddle.net/9kWJZ/

Answer 7

#chess {width:256px; height:256px; border:1px solid;} 
#chess div {width:32px; height:32px; display:inline-block; } 
#chess div:nth-child(16n+1), #chess div:nth-child(16n+3), 
#chess div:nth-child(16n+5), #chess div:nth-child(16n+7), 
#chess div:nth-child(16n+10),#chess div:nth-child(16n+12), 
#chess div:nth-child(16n+14),#chess div:nth-child(16n+16) { 
    background-color:black; 
} 

Penso risposte utilizzando galleggiante/trasparente sono migliori, proprio quello che mi è venuta.

Answer 8

Per coloro che hanno bisogno di una scheda di CSS3 scacchi con ogni quadrato avere un id in modo che si può utilizzare con JavaScript, io in grado di proporre questa soluzione:

https://github.com/vpcom/CSS3-Chess-Board

Una demo è disponibile qui: http://vincentperrin.com/cr/css3/css3-chess-board/

È fatto con Sass (notazione SCSS) ma è anche possibile utilizzare il file CSS elaborato. Per coloro a cui piace, questo tipo di cose può essere fatto anche con Jade.

Divertiti!

Answer 9

Prova questo:

table.CHESS { 
    border-collapse: collapse; 
} 

table.CHESS td { 
    width: 50px; 
    height: 50px; 
    border: solid gray 1px; 
} 

table tr:nth-child(odd) td:nth-child(odd) { 
    background: #000; 
} 

table tr:nth-child(even) td:nth-child(even) { 
    background: #000; 
} 

Answer 10

In puro CSS, la risposta accettata guarda a destra - tuttavia, se si vuole accorciare questo con SCSS, si possono fare alcune matematica:

#chess { 
    div { 
    background: #fff; 
    /* even children on odd rows, odd children on even rows */ 
    @each $offset in 2 4 6 8 9 11 13 15 { 
     &:nth-child(16n + #{$offset}) { 
     background: #000; 
     } 
    } 
    } 
}