Форум

Luca · #1 (**permalink**) 21.06.2017, 14:55

index.html

<style>
            #app>ul:nth-child(even) {
                color: cornflowerblue;
            }
            #app>ul:nth-child(odd) {
                color: coral;
            }
</style>
<div id="app"> </div>
<script src="main.js"></script>

main.js

let types = {
            sBool : '<h3>boolean</h3><ul>',
          sString : '<h3>string</h3><ul>',
      sNumber : '<h3>number</h3><ul>',
      sFunction : '<h3>function</h3><ul>',
          sObject : '<h3>object</h3><ul>'
};
let s = "<ul>";
for (let i in app){
    s += `<li>${i}</li>`;
    log(typeof app[i]);
    switch (typeof app[i]) {
        case 'boolean'  :        types.sBool     += `<li>${i}</li>`;
           case 'string'   :        types.sString   += `<li>${i}</li>`;
        case 'number'   :    types.sNumber   += `<li>${i}</li>`;
          case 'function' :     types.sFunction += `<li>${i}</li>`;
           case 'object'   :      types.sObject   += `<li>${i}</li>`;
    }

}
for (let i in types) {
    types[i] += "</ul>";
    app.innerHTML += types[i];
}

в общем получаю все свойства и методы div и распечатываю их на страницу в виде списков по типам
boolean
translate
hidden
draggable
spellcheck
isContentEditable
isConnected
string
align
title
lang
translate
dir
hidden
...............

хотел списки "под зебру" раскрасить, а не получается - работает только селектор odd и красит все списки в своё
цвет.
почему так?

j0hnik · #2 (**permalink**) 21.06.2017, 15:08

<html>
<head>
	<meta charset="utf-8">
	<style>
            ul>li:nth-child(2n) {
                color: cornflowerblue;
            }
            ul>li:nth-child(2n+1) {
                color: coral;
            }
</style>
</head>
<body>
<ul>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
<li>568975896</li>
</ul>
	</script>
</body>
</html>

laimas · #3 (**permalink**) 21.06.2017, 15:15

j0hnik,
хватит even и odd, nth-child для более сложных.

j0hnik · #4 (**permalink**) 21.06.2017, 15:19

Сообщение от laimas

j0hnik,
хватит even и odd, nth-child для более сложных.

#app ul>li:nth-child(even)

laimas · #5 (**permalink**) 21.06.2017, 15:28

j0hnik,
именно неверное указание селектора, а не псевдоселектор причина ошибки автора. При этом если у списка нет вложений, то указание дочерних тоже не требуется.

рони · #6 (**permalink**) 21.06.2017, 15:33

Luca,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#app>ul li:nth-child(even){
  color:cornflowerblue;
}

#app>ul li:nth-child(odd){
  color:coral;
}
</style>
</head>

<body>

<div id="app"> </div>
<script>

"use strict";
let types = {
            sBool : '<h3>boolean</h3><ul>',
          sString : '<h3>string</h3><ul>',
      sNumber : '<h3>number</h3><ul>',
      sFunction : '<h3>function</h3><ul>',
          sObject : '<h3>object</h3><ul>'
};
let s = "<ul>";
for (let i in app){
    s += `<li>${i}</li>`;
    //log(typeof app[i]);
    switch (typeof app[i]) {
        case 'boolean'  :        types.sBool     += `<li>${i}</li>`;
        case 'string'   :        types.sString   += `<li>${i}</li>`;
        case 'number'   :    types.sNumber   += `<li>${i}</li>`;
        case 'function' :     types.sFunction += `<li>${i}</li>`;
        case 'object'   :      types.sObject   += `<li>${i}</li>`;
    }

}
for (let i in types) {
    types[i] += "</ul>";
    app.innerHTML += types[i];
}
</script>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript