Как исправить проблему в стиле кода?

Question

[Александр Коновалов]

У меня есть код

.elastislide-list, .elastislide-list:after, .elastislide-list:before {-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;}

<div class="container demo-3">
			

         


				<div class="fixed-bar">
					<!-- Elastislide Carousel -->
					<ul id="carousel" class="elastislide-list">
						<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
						<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
						<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
						<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
						<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
						<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
						<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
						<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
						<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
						<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
						<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
						<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
						<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
						<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
						<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
						<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
						<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
						<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
						<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
						<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
					</ul>
					<!-- End Elastislide Carousel -->
				</div>

				
			</div>
		</div>

Answer 1

[goodknight]

Создать селектор для слайдшоу и применить эти правила только для него
Или создать селектор для формы и написать, чтобы только для формы эти правила не применялись. С помощью псевдокласса :not

*:not(.form-selector),
*:after:not(.form-selector),
*:before:not(.form-selector) {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Comments

[Александр Коновалов]

А можно пример только для слайдшоу?

[goodknight]

@Huf Вы хотите, чтобы border-box применялся ко всему, кроме слайдшоу?

[Александр Коновалов]

Наоборот, чтобы применялся только к слайдшоу

[Александр Коновалов]

Спасибо, попробую.

[goodknight]

@Huf Ну только к этому применять не очень-то и современно. Потому что в последнее время почти везде по всех популярных f-end фреймворках прописаны на всё box-sizing: border-box;. Поэтому лучше применить это правило ко всему, что с ним нормально отображается, а, что плохо отображается, исключить из правила; чем применять только к тому, что без него отображается с багами.

[Александр Коновалов]

@MaxKorz не помогло, я изменю вопрос и покажу Вам код