Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Не в том порядке выдает записи изза чего неверно работает стиль nth-child

Добрый день, уважаемые форумчане!
Подскажите, пожалуйста!
Мне нужно использовать в CSS nth-child(3n). В обычном html шаблоне все нормально выводится. Но когда записи у меня выводятся динамически, nth-child(3n) работает будто в случайном порядке. При помощи firebug посмотрел, все записи идут одна за другой, только где firebug показывает 2ую запись, в стиле к ней стоит nth-child(3), где firebug показывает 5ую запись, в стиле к ней стоит nth-child(12), не понимаю, почему nth-child(3n) присваивается как то в хаотическом порядке при динамическом выводе при помощи:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="projects-name1dop">
<?php $the_query = new WP_Query('cat=18&showposts=99'); ?>
<?php while  ($the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="primery_rabot-name2">
                            <a href="<?php the_permalink(); ?>"> <div class="projects-name3">
                                <span><?php the_title(); ?></span>
                            </div>
                            <div class="primery_rabot-name-image">
                            <?php the_post_thumbnail(); ?><!--миниатюра записи (картинка)-->
                            </div>
                            
</div>
<?php endwhile; ?>
<?php wp_reset_postdata();?>                    
</div>
Из-за чего не верно работает nth-child(3n)??? Очень прошу помощи, уже нереально сколько мучаюсь. Из-за этого шаблон не могу прикрутить, чтобы правильно выводил записи.

Вот стили:
CSS
1
2
3
4
5
6
7
.primery_rabot-name2:nth-child(3n){
            float:left;
            width:240px;
            overflow:hidden;
            margin-right:0px;
            margin-top:30px;
        }
Ответ:
Только вот про строчный и блочный если можно вопросик пояснить
Мне , что в HTML5 так уже можно делать, поэтому можете просто не обращать внимания на эту часть ответа .
Вопрос: Как работает :nth-child() ?

Добрый день уважаемые. Я пришел к пониманию того, что не правильно понимал, то как работает псевдокласс :nth-child() Помогите разобраться.
Если элементы вложены в один div проблем ни каких не возникает, а вот если элементов с классом много, то у меня возникают проблемы. Приведу пример.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.rabbit{
			width: 100px;
			height: 100px;
			float: left;
			background-color: black;
			margin: 5%;
		}

		.bodyR{
			width: 30px;
			height: 30px;
			float: left;
			background-color: green;
			margin: 10%;
		}

		.eyes {
			width: 10px;
			height: 10px;
			float: left;
			background-color: yellow;
			margin: 20%;
		}

.bodyR:nth-child(2){
	background-color: pink;
}

.eyes:nth-child(3){
	background-color: orange;
}

	</style>
</head>
<body>
	  <div class="rabbit">
            <div class="bodyR">
                <div class="eyes"></div>    
            </div>
        </div>
       <div class="rabbit">
            <div class="bodyR">
                <div class="eyes"></div>    
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="eyes"></div>    
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="eyes"></div>    
            </div>
        </div>
        <div class="rabbit">
            <div class="bodyR">
                <div class="eyes"></div>    
            </div>
        </div>

</body>
</html>

Подскажите, почему мне не удается, разукрасить фон у второго элемента с классом .bodyR и у третьего элемента с классом .eyes.
Я думал что при работе с классами :nth-child сначала узнает сколько всего элементов имеет данный класс, а затем нужному по-порядку элементу задает свойства. Но нет)
Ответ: Спасибо, за объяснение
Вопрос: Формулы nth-child для выборки div

Здравствуйте.

Даны 16 div, которые располагаются:
01 02 03 04
05 06 07 08
09 10 11 12
13 14 15 16

Нужно написать формулы, чтобы отдельно выбрать div
по столбцам:
- 01, 05, 09, 13;
- 02, 06, 10, 14;
и т.д.

по строкам:
- 01, 02, 03, 04;
- 05, 06, 07, 08;
и т.д.

Для столбцов, вроде, формулы должны быть такими:
4n+1;
4n+2:
4n+3;
4n+4.

Никак не могу сообразить какие формулы нужно вписать для nth-child, чтобы выбрать div по строкам.
Ответ:
Сообщение от YarBear
Никак не могу сообразить какие формулы нужно вписать для nth-child, чтобы выбрать div по строкам.
Если бы это была таблица, то так:
CSS
1
2
3
4
tr:nth-child(4n+1){}
tr:nth-child(4n+2){}
tr:nth-child(4n+3){}
tr:nth-child(4n+4){}
А так для каждой строки можно сделать горизонтальный блок обёртку по 4 дива внутри... Т.о. у Вас получилось 4 строки по 4 дива...
Вопрос: Разобраться не могу с псевдоклассом :nth-child

Задача в том что бы переименовать «test1» на одно название, а «test2» на другое, но я не знаю как это сделать и вообще возможно данное действие, потому что как не мучил псевдокласс :nth-child не получается сделать так что бы было:

#side_bar_inner [id*="l_mgid"] .left_label:before:nth-child(1) {
    font-size: 13px !important;
    content:"Test3";
}
#side_bar_inner [id*="l_mgid"] .left_label:before:nth-child(2) {
    font-size: 13px !important;
    content:"Test4";
}



Помогите с решением проблемы как правильно подставить «:nth-child»


#side_bar_inner [id*="l_mgid"] .left_label {
    font-size: 0px !important;
}
#side_bar_inner [id*="l_mgid"] .left_label:before {
    font-size: 13px !important;
    content:"Test3";
}


<div id="side_bar_inner">
	<ol>
		<li id="l_pr">
		<a href="/primer">
		<span class="left_label inl_bl">Моя страница</span>
		</a>
		</li>
		<li id="l_mgid11111111">
		<a href="/test1" class="left_row">
		<span class="left_label inl_bl">test1</span>
		</a>
		</li>
		<li id="l_mgid22222222">
		<a href="/test2" class="left_row">
		<span class="left_label inl_bl">test2</span>
		</a>
		</li>
	</ol>
</div>
Ответ: поставь себе cms по типу
Вопрос: Nth-child(even) в блочной таблице

Всем привет есть блок вот такой структуры
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="table-results">
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
    </div>
Хочу сделать четные и нечетные блоки .tr разноцетные.
Пишу
CSS
1
2
3
4
5
6
.table-results .tr:nth-child(even) {
  background: #eef5f5;
}
.table-results .tr:nth-child(odd) {
  background: #eaf2f3;
}
Но всем блокам .tr присваивается цвет для .table-results .tr:nth-child(even) Что я делаю не так?
Ответ: Задайте высоту и ширину дивам. Посмотреть
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div class="table-results">
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
        <div class="tr"></div>
        <div class="trade-result"></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
.table-results .tr:nth-child(4n+3) { /*Четные элементы tr*/
  background-color: red;
  width: 100px;
  height: 100px;
}
.table-results .tr:nth-child(4n+1) {/*нечетные элементы tr*/
  background-color: green;
  width: 100px;
  height: 100px;
}
Вопрос: Комбинирование [attr] и :nth-child()

Имеется группа элементов с классом .block. Эта группа разделяется на 2 подгруппы:

• Элементы с атрибутом style="color:red"
• Элементы с атрибутом style="color:green"

Из всех этих элементов я хочу взять лишь красные. И в этих красных взять все нечетные элементы.

Пытаюсь так:
Но тут получается так, что :nth-child(odd) учитывает зеленые. Я же хочу получить: red 1, red 3, red 5, red 7, red 9, red 11.

Как мне быть ?
CSS
1
2
3
4
5
6
.block[style="color:red"]:nth-child(odd) {
  color:blue;
  font-weight:900;
  text-decoration:underline;
  margin-left:70px;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="block" style="color:red">red 1</div>
<div class="block" style="color:red">red 2</div>
<div class="block" style="color:red">red 3</div>
<div class="block" style="color:green">green 1</div>
<div class="block" style="color:green">green 2</div>
<div class="block" style="color:green">green 3</div>
<div class="block" style="color:red">red 4</div>
<div class="block" style="color:red">red 5</div>
<div class="block" style="color:green">green 4</div>
<div class="block" style="color:green">green 5</div>
<div class="block" style="color:red">red 6</div>
<div class="block" style="color:red">red 7</div>
<div class="block" style="color:green">green 5</div>
<div class="block" style="color:green">green 6</div>
<div class="block" style="color:red">red 8</div>
<div class="block" style="color:green">green 7</div>
<div class="block" style="color:red">red 9</div>
<div class="block" style="color:green">green 8</div>
<div class="block" style="color:red">red 10</div>
<div class="block" style="color:green">green 9</div>
<div class="block" style="color:red">red 11</div>
Ответ: Потому что, у CSS ограниченные возможности. Все, с чем не справляются стили, справляются скрипты.
В CSS нет псевдокласса :even, ровно, как и в нативном js.
Вопрос: nth-child(2n) не работает

Код:
<div class='d1>
  <div class='
d2'></div>
  <div class='
blabla'></div>
  <div class='
d2'></div>
</div>

.d1 .d2:nth-child(2n){
    float: right;
}

изза дива blabla не работает стиль, если убрать див blabla то работает. почему так и как исправить?

PHP, JavaScript, SQL и другой код пишите внутри тегов [code=php]Тут код[/code]
Ответ: я так понял что css не понимает как реагировать на див blabla и как ровнять относительно его
сам див blabla у меня невидимый, это модальное окно
я сделал проще- вынес див blabla в конец страницы
Вопрос: Не присваевается :nth-child

Вечер в хату, господа


Есть вот такая разметка
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    <div class="row">
        <div class="col-lg-3 col-xs-12 col-md-4 col-sm-6 categories-wrapper">
            <div class="categories-bg">
            
 
        что-то тут
 
            </div>
        </div>
        <div class="col-lg-3 col-xs-12 col-md-4 col-sm-6 categories-wrapper">
            <div class="categories-bg">
        
 
        что-то тут
 
            </div>
        </div>
        <div class="col-lg-3 col-xs-12 col-md-4 col-sm-6 categories-wrapper">
            <div class="categories-bg">
        
 
        что-то тут
 
            </div>
        </div>
        <div class="col-lg-3 col-xs-12 col-md-4 col-sm-6 categories-wrapper">
            <div class="categories-bg">
        
 
        что-то тут
 
            </div>
        </div>
    </div>


И вот такие стили

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  .categories-wrapper{
    height: 300px;
 
 
  }
 
  .categories-bg{
    position: relative;
    width: 90%;
    
    height: 90%;
    margin: auto;
  }
 
  .categories-wrapper{
    background-color: #ff0;
  }
 
  .categories-bg:nth-child(2){
    background: #00f;
 
  }
Суть проблемы в том, что у меня не получается присвоить бг для categories-bg, используя nth-child.

Если я устанавливаю бг для .categories-bg:nth-child(1), то этот бг распространяется на все элементы, если же использую .categories-bg:nth-child(2), то ничего не отображается. При этом, когда я присваиваю те же самые стили для categories-wrapper:nth-child(2) всё работает замечательно.

Подскажите, в чём дело, заранее спасибо
Ответ: Опа, спасибо большое
Вопрос: Не работает :nth-child



HTML-код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<ul class="wrap">
    <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСЫ 1</h1></a>
    </article>
</a>
</li>
 
  <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСЫ</h1></a>
    </article>
</a>
</li>
  
  <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСЫЫЫЫЫ</h1></a>
    </article>
</a>
</li>
  
  <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСИКИ</h1></a>
    </article>
</a>
</li>
  
  <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСЫ</h1></a>
    </article>
</a>
</li>
  
  <li class="wrap-child">
<a href="<?php the_permalink(); ?>" >
  <ARTICLE class="artist-list-item">
    <div id="artists-thumbnails">
    <img class="image-up" src="https://s-media-cache-ak0.pinimg.com/564x/78/26/8c/78268c66d4c4d7f22c45744bec43a612.jpg" />
    <img class="image-down" src="https://s-media-cache-ak0.pinimg.com/564x/75/6e/d7/756ed724604ace46d1038568bd9ecd1e.jpg"/>
    </div>
    <a href="#" class="artist-list-name"><h1>ЧАСЫ</h1></a>
    </article>
</a>
</li>
</ul>
CSS - стили:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
.wrap{
  max-width:968px;
  margin:0 auto;
}
.artist-list-item{
padding-bottom: 30px;
width:228px;
display: inline-block;
position: relative;
 
}
.artist-list-item h1{
color: black;
opacity: 0.8;
font-weight: normal;
font-size: 14px;
}
.artist-list-item h1:hover{
opacity: 1;
}
#artists-thumbnails{
width:100%;
display: block;
background: #d5d5d5 center center no-repeat;
background-size: cover;
float: left;
filter: grayscale(100%); 
 
}
 
 
.image-up, .image-down {
   width: 100%;
   height: 228px;
   border: 0;
   margin: 0;
   background: none repeat scroll 0 0 #FFFFFF;
   float: left;
   padding: 0;
}
 
.image-up {
   opacity: 1.0;
   filter: alpha(opacity=99); /* IE */
   display: block;
   position: absolute;
   z-index: 100;
   transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -ms-transition-duration:  0.2s; /* IE9+ */
}
 
.image-up:hover {
   opacity: 0.00;
   filter: alpha(opacity=00); /* IE */
}
#artists-thumbnails:hover{
filter: grayscale(0%);
    
}
.artist-list-name{
    margin-top: 15px;
    display: block;
    float: left;
}
.artist-list-name h1{
margin: 0;
padding: 0;
}
.artist-photo{
}
a,li, h1, h2, h3, h4, h5,h6{
    list-style: none;
    text-decoration: none;
    color: #000000;
 
}
@font-face {
   font-family: Avenir;   
   src: url('fonts/avenir.eot'); /* IE9 */
   src: url('fonts/avenir.eot?') format('eot'),  /* IE6-IE8 */
   url('fonts/avenir.woff') format('woff'), /* Современные браузеры */
   url('fonts/avenir.ttf')  format('truetype'), /* Safari, Android, iOS */  
   url('avenir.svg#svgavenir') format('svg'); /* iOS */  
}
 
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Avenir', Helvetica, Arial, san-serif!important;
  color: #000000;
}
 
::selection {
  background: transparent;
  color:rgba(210, 56, 136, 0.85);
  opacity: 0.5;
}
::-moz-selection {
  background: transparent;
  color:rgba(210, 56, 136, 0.85);
  opacity: 0.5;
}
h1, h2, h3, h4, h5,h6{font-weight: 400;
    
}
.wrap-child{
  display:inline-block;
  padding-right: 90px;
}
 
wrap li:nth-child(3){
  float:right;
  padding-left:20px;
  margin-top:50px;
}
.wrap{
  border:1px solid black;
}
Почему не работает?
Нужно что каждый третий блок в ряду был float:left;
Проще говоря,сделать так ,чтоб блоки были по всей ширине блока равномерно распреелны,отступами....и последний в ряду не отступал от правого конца блока...
Ответ: CTapu4ok, :nth-child(3n) будет достаточно.
Вопрос: Использование псевдокласса nth-child для указания стилей

Добрый день. Подскажите как его можно применить к тегу <a>.
Так работает
CSS
1
ul li:nth-child(2)
А так не работает
CSS
1
a:nth-child(2)
Ответ:
Сообщение от Secret73
Просто хотелочь знать есть другой вариант или нет
Да их куча, назначить классы, назначить id, назначить title, выбирать по href