CSS Nth-Child Checkered

Can :checked and :nth-child() be used Together?

Maybe a bit late to the party, but since all the other answers say it can't be done in CSS alone, here is the solution.

You can only do this if all the checkboxes are in the same container. So not one checkbox per list item. If you want the result to look like a list, you will have to add some more CSS.

input:checked + label {  color: green;}
input:checked ~ input:checked ~ input:checked ~ input:checked~ input:checked ~ input:checked ~ input:checked ~ input:checked~ input:checked ~ input:checked ~ input:checked + label {  color: red;}

/* Put each checkbox on a different line */label:not(:last-child)::after {  content: '\000A';  white-space: pre;}
<div class="list">  <input type="checkbox" id="checks1" name="checks"> <label for="checks1">Test 1</label>  <input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label>  <input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label>  <input type="checkbox" id="checks4" name="checks"> <label for="checks4">Test 4</label>  <input type="checkbox" id="checks5" name="checks"> <label for="checks5">Test 5</label>  <input type="checkbox" id="checks6" name="checks"> <label for="checks6">Test 6</label>  <input type="checkbox" id="checks7" name="checks"> <label for="checks7">Test 7</label>  <input type="checkbox" id="checks8" name="checks"> <label for="checks8">Test 8</label>  <input type="checkbox" id="checks9" name="checks"> <label for="checks9">Test 9</label>  <input type="checkbox" id="checks10" name="checks"> <label for="checks10">Test 10</label>  <input type="checkbox" id="checks11" name="checks"> <label for="checks11">Test 11</label>  <input type="checkbox" id="checks12" name="checks"> <label for="checks12">Test 12</label>  <input type="checkbox" id="checks13" name="checks"> <label for="checks13">Test 13</label>  <input type="checkbox" id="checks14" name="checks"> <label for="checks14">Test 14</label>  <input type="checkbox" id="checks15" name="checks"> <label for="checks15">Test 15</label>  <input type="checkbox" id="checks16" name="checks"> <label for="checks16">Test 16</label>  <input type="checkbox" id="checks17" name="checks"> <label for="checks17">Test 17</label>  <input type="checkbox" id="checks18" name="checks"> <label for="checks18">Test 18</label>  <input type="checkbox" id="checks19" name="checks"> <label for="checks19">Test 19</label>  <input type="checkbox" id="checks20" name="checks"> <label for="checks20">Test 20</label></div>

Checkerboard Pattern css selectors

Try this css:

div:nth-of-type(8n+2),
div:nth-of-type(8n+4),
div:nth-of-type(8n+5),
div:nth-of-type(8n+7)
{ background-color: green}

Check this fiddle: https://jsfiddle.net/1f898yru/4/

Creating Check Pattern with nth-child

You need to keep all the p elements together in a single div, as the nth-child is based off the parent container. Here is a modified fiddle.. It uses this code:

HTML

<div id ='check'>
    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
    <p>Even</p>
</div>

CSS

#check { 
    float:left; 
    width: 100%;
}
#check p {  
    width: 50%;
    background: #DDD;
    clear:both;
}

#check p:nth-child(odd) {
    float:right;
}

#check p:nth-child(even) {
    float:left
}

how to create chekerboard using nth-child(odd&even) with 8x8 grid

It is like one of the many options for constructing an 8x8 checkerboard using a grid.

Use double and triple nth-child() to build sections with background-color: rgb(40, 40, 194) background:

:nth-child(-n + 8):nth-child(even),
:nth-child(n + 8):nth-child(-n + 16):nth-child(odd),
...
:nth-child(n + 57):nth-child(-n + 64):nth-child(odd)

This creates an interval.

For the rest of the cells (light), specify the background color background-color: rgb(185, 48, 48), use the css rule as for everyone.

.papan {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    justify-content: center;
    margin: auto;
    padding-top: 50px;
}

.papan div {
    border: 1px solid black;
    background-color: rgb(185, 48, 48);
}

.papan div:nth-child(-n + 8):nth-child(even),
.papan div:nth-child(n + 8):nth-child(-n + 16):nth-child(odd),
.papan div:nth-child(n + 17):nth-child(-n + 24):nth-child(even),
.papan div:nth-child(n + 25):nth-child(-n + 32):nth-child(odd),
.papan div:nth-child(n + 33):nth-child(-n + 40):nth-child(even),
.papan div:nth-child(n + 41):nth-child(-n + 48):nth-child(odd),
.papan div:nth-child(n + 49):nth-child(-n + 56):nth-child(even),
.papan div:nth-child(n + 57):nth-child(-n + 64):nth-child(odd) {
    background-color: rgb(40, 40, 194);
}

.papan div:hover {
    background-color: black;
}

.papan div:nth-child(-n + 8):nth-child(even):hover,
.papan div:nth-child(n + 8):nth-child(-n + 16):nth-child(odd):hover,
.papan div:nth-child(n + 17):nth-child(-n + 24):nth-child(even):hover,
.papan div:nth-child(n + 25):nth-child(-n + 32):nth-child(odd):hover,
.papan div:nth-child(n + 33):nth-child(-n + 40):nth-child(even):hover,
.papan div:nth-child(n + 41):nth-child(-n + 48):nth-child(odd):hover,
.papan div:nth-child(n + 49):nth-child(-n + 56):nth-child(even):hover,
.papan div:nth-child(n + 57):nth-child(-n + 64):nth-child(odd):hover {
    background-color: white;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Papan Catur</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="papan">
            <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>
    </body>
</html>

How to override CSS nth-child selector property from the HTML

You can't directly affect the style of the nth-child element like that, but you can set CSS variables which can be picked up when styling a property.

In this snippet a parent container can be styled inline with a --bg variable setting and this can be picked up by the settings for the nth-child(even).

.gantt-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  background-color: #fff;
}

.gantt-row:nth-child(even) {
  background-color: var(--bg);
}

.gantt-row:nth-child(even) .gantt-row-name {
  background-color: var(--bg);
}
<div style="--bg: blue;">
  <div class="gantt-row">odd</div>
  <div class="gantt-row">even</div>
</div>

nth-child with mod (or modulo) operator

No, :nth-child() only supports addition, subtraction and coefficient multiplication.

I gather you're trying to pick up the first 6 elements (as n mod 7 for any positive integer n only gives you 0 to 6). For that, you can use this formula instead:

:nth-child(-n+6)

By negating n, element counting is done backwards starting from zero, so these elements will be selected:

 0 + 6 = 6
-1 + 6 = 5
-2 + 6 = 4
-3 + 6 = 3
-4 + 6 = 2
-5 + 6 = 1
...

jsFiddle demo

Making a checkerboard pattern using CSS Selectors

It seems like you are making a simple checkerboard, so if you set every thing to green, you just need to override everything that needs to be blue. nth-child can also accept a fomula that gives an n or multiple of n with an offset.

As you have them numbered, note that in the right column you have 4 and 8 (next would be 12), so you need every 4th element, and in the left you have 1 and 5 (next would be 9), so you also need the 4th plus one (1 is technically 4*0+1).

There is a fiddle here that demos it, but the relevant code is:

/* Color everything green */
.checkerboard div {
    width:45%;
    display:inline-block;
    background-color:green;
}

/* Then color the appropriate divs blue */
.checkerboard div:nth-child(4n+1),
.checkerboard div:nth-child(4n) {
    background-color:blue;
}

And gives:

css checkerboard


Related Topics

Remove Border Around Sprite Image in Chrome

How to Reuse Styles

When Should CSS Font-Family Value Use Quotes

Is Anyone Experiencing Layout Issues After Upgrading to Chrome 72

:Empty Pseudo Class Issue with Added/Removed Content and Sibling Combinators

CSS Input Submit Link

Add Padding Without Changing Overall Width

Is There a Clean Way to Get Borders on a <Tbody /> in Pure CSS

Imitate Photoshop Blend Effects Like Multiply, Overlay etc

Css: How to Center a Horizontal List? Display:Inline Not Working

CSS - 100% + Padding

What Is Element.Style and Why Is It Overriding My CSS Settings

Images Border-Radius Doesn't Work During CSS Transition

How to Make a Hard-Edged Gradient on a Large Element

CSS Selection Color Behaving Strangely on Chrome

CSS Circle Border Fill Animation

Iframe Horizontal Scrolling Not Rendering on iOS

Remove the Material Stepper Header


Leave a reply



Submit