css - How do I apply a style to every nth set of size m? -

-

in css, can apply style every nth item using :nth-child:

li:nth-child(3) {   background: green; }

this make every 3rd row green. if want have rows styled in pattern of 3 white, 3 green, repeating?

 1  2  3 [4][5][6] 7  8  9 [10][11][12]

more complex: if wanted have rows styled in pattern of 3 white, 2 green, repeating?

 1  2  3 [4][5] 6  7  8 [9][10] 11  12

and finally: if wanted highlight remainder of total length/3 (the positions in brackets)?

[1] [1][2] [1][2][3]  1  2  3 [4]  1  2  3 [4][5]  1  2  3 [4][5][6]  1  2  3  4  5  6 [7]  1  2  3  4  5  6 [7][8]  1  2  3  4  5  6 [7][8][9]

is there way these patterns in css?

you can use comma operator this:

:nth-child(6n-2), /* 4, 10, 16, 22, ... */ :nth-child(6n-1), /* 5, 11, 17, 23, ... */ :nth-child(6n)    /* 6, 12, 18, 24, ... */ 

ul {    list-style: none;    padding: 0;    margin: 0;  }  li {    display: inline-block;    padding: 5px;  }  li:nth-child(6n-2),  li:nth-child(6n-1),  li:nth-child(6n) {    background: green;  }
<ul><li>01</li></ul>  <ul><li>01</li><li>02</li></ul>  <ul><li>01</li><li>02</li><li>03</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

:nth-child(5n-1), /* 4,  9, 14, 19, ... */ :nth-child(5n)    /* 5, 10, 15, 20, ... */ 

ul {    list-style: none;    padding: 0;    margin: 0;  }  li {    display: inline-block;    padding: 5px;  }  li:nth-child(5n-1),  li:nth-child(5n) {    background: green;  }
<ul><li>01</li></ul>  <ul><li>01</li><li>02</li></ul>  <ul><li>01</li><li>02</li><li>03</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

and can combine :nth-last-child:

li:nth-child(3n-2):nth-last-child(-n+3), /* in 1,4,7,... , in last 3 */ li:nth-child(3n-1):nth-last-child(-n+2), /* in 2,5,8,... , in last 2 */ li:nth-child(3n):nth-last-child(-n+1)    /* in 3,6,9,... , in last 1 */ 

ul {    list-style: none;    padding: 0;    margin: 0;  }  li {    display: inline-block;    padding: 5px;  }  li:nth-child(3n-2):nth-last-child(-n+3),  li:nth-child(3n-1):nth-last-child(-n+2),  li:nth-child(3n):nth-last-child(-n+1)  {    background: green;  }
<ul><li>01</li></ul>  <ul><li>01</li><li>02</li></ul>  <ul><li>01</li><li>02</li><li>03</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>  <ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>


Comments

Post a Comment

Popular posts from this blog

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops', ...
Read more

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null ...
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens ...
Read more