css правило с псевдоклассами

121

09 сентября 2019, 03:50

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
</head> 
<body> 
    <style> 
        #news :nth-child(4n) :not([id*="universal"]){ color:violet} 
        </style> 
    <div class="" id="news"> 
        <div>1</div> 
        <div>2</div> 
        <div>3</div> 
        <div>4</div> 
        <div>5</div> 
        <div>6</div> 
        <div>7</div> 
        <div>8</div> 
        <div>9</div> 
        <div>10</div> 
        <div>11</div> 
        <div>12</div> 
        <div class="" id="universal001">LINE</div> 
        <div>13</div> 
        <div>14</div> 
        <div>15</div> 
        <div>16</div> 
        <div>17</div> 
        <div>18</div> 
        <div>19</div> 
        <div>20</div> 
        <div>21</div> 
        <div>22</div> 
        <div>23</div> 
        <div>24</div> 
        <div class="" id="universal002">LINE</div> 
        <div>1</div> 
        <div>2</div> 
        <div>3</div> 
        <div>4</div> 
        <div>5</div> 
        <div>6</div> 
        <div>7</div> 
        <div>8</div> 
        <div>9</div> 
        <div>10</div> 
        <div>11</div> 
        <div>12</div> 
        <div class="" id="universal003">LINE</div> 
    </div> 
</body> 
</html>

Почему не работает css правило?Или псевдоклассы нельзя сочетать? Задача "окрасить каждый 4 элемент, но не элемент с id , который содержит подстроку universal"

Answer 1

<style>
#news :nth-child(4n):not([id*="universal"]){ color:violet}
</style>

пробел лишний

Answer 2

Ошибка в том, что вы указываете правило для блока с id="news", а не для вложенных в него элементам. Должно быть так:

 #news div:nth-child(4n):not([id^="universal"]){ color: violet }

Answer 3

То, чего Вы хотите добиться, с помощью css правила :not сделать не получится. Я набросал Вам примерный вариант, как достичь результата с jQuery:

let i = 0; //задаём счётчик 
$('#news div').each(function(){ //в цикле по всем дочерним элементам 
  if($(this).text() != 'LINE') { //если элемент не LINE 
    i++; //увеличиваем счётчик 
  } 
  if($(this).text() != 'LINE' && i%4 == 0) { //если элемент не LINE и он кратен четырем 
    $(this).css('color', 'red'); //окрашиваем его 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="" id="news"> 
        <div>1</div> 
        <div>2</div> 
        <div>3</div> 
        <div>4</div> 
        <div>5</div> 
        <div>6</div> 
        <div>7</div> 
        <div>8</div> 
        <div>9</div> 
        <div>10</div> 
        <div>11</div> 
        <div>12</div> 
        <div class="" id="universal001">LINE</div> 
        <div>13</div> 
        <div>14</div> 
        <div>15</div> 
        <div>16</div> 
        <div>17</div> 
        <div>18</div> 
        <div>19</div> 
        <div>20</div> 
        <div>21</div> 
        <div>22</div> 
        <div>23</div> 
        <div>24</div> 
        <div class="" id="universal002">LINE</div> 
        <div>1</div> 
        <div>2</div> 
        <div>3</div> 
        <div>4</div> 
        <div>5</div> 
        <div>6</div> 
        <div>7</div> 
        <div>8</div> 
        <div>9</div> 
        <div>10</div> 
        <div>11</div> 
        <div>12</div> 
        <div class="" id="universal003">LINE</div> 
    </div>