.item-data > .price {
display: flex !important;
flex-direction: row-reverse;
justify-content: flex-end;
}themeButton.value = (themeButton.value === "Темная тема") ? "Светлая тема" : "Темная тема";<input type="button" value="Темная тема" class="themeButton"><button type="button" class="themeButton" data-light-text="Темная тема" data-dark-text="Светлая тема"></button>.themeButton::before {
content: attr(data-dark-text)
}
body.darkTheme .themeButton::before {
content: attr(data-light-text)
}buildQuiz()const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Who can help us?", answers: { a: "Noone", b: "Specialists", c: "Youself" }, correctAnswer: "b" }, { question: "Which language can you use to write it?", answers: { a: "PHP", b: "Java Script", c: "CSS"}, correctAnswer: "b" } ];
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");const slides = document.querySelectorAll(".slide");showSlide
<div>
<input type="text" id="test">
<label for="test">Text</label>
</div>div{
display: flex;
flex-direction: column;
}
label{ order: 1 }
input{ order: 2 }
input:focus + label{ background: red }/* Все дочерние элементы этого flex-блока, которые находятся на одной горизонтали, становятся одной высоты */
.single-post__prod{ align-items: stretch; }
/* Карточка товара становится Флексом, в колонку. Чтобы можно было позиционировать её дочерние элементы */
.single-post__prod-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.single-post__prod-item > * { width: 100% } /* все дочерние элементы чтобы были во всю ширину */
.single-post__prod-item img {
margin: 0 auto; /* заменил margin: auto */
}
.single-post__prod-weight,
.single-post__pricing{
margin-top: auto; /* Делаем так, чтобы этот блок и все блоки, которые ниже него, были прилеплены книзу */
}
.single-post__prod-weight + .single-post__pricing{
margin-top: 0; /* Если существует single-post__prod-weight, то у single-post__pricing margin-top убираем */
}svg > use{ fill: red }<img src="mysvg.svg" />) значения атрибутов fill и stroke заменить на css-переменные.fill="var(--myColor1)" stroke="var(--myColor2)".myBlock{
--myColor1: red;
--myColor2: green
}
.myBlock:hover{
--myColor1: blue;
--myColor2: aqua
}<img />применил css-свойство image-rendering, подбирая для каждого браузера своё значение префиксами..slider__ я бы / поместил в отдельный <span />.slider__current и .slider__max задал бы минимальную ширину (дав им inline-block, а лучше их контейнеру flex)..header position: fixed, я бы изначально дал position: sticky. А уже классом .header_fixed просто давал бы background и box-shadow.
display: blockfont-size: 0;
line-height: 0;<img /> изначально - display :inline-block
position: static или relative) работает только если у их родителя фиксированная высота.height: 400px.main-container {
display: flex;
flex-direction: column; /* направление по вертикали (row — по горизонтали) */
margin: 0 auto; /* блок располагается по центру (по горизонтали) */
width: 100%;
max-width: 1600px; /* Максимальная ширина */
min-height: 100vh; /* минимальная высота - высота экрана */
}
.main-container > *{
width: 100% /* иногда у потомков блоках с display: flex, ширина не 100%, поэтому на всяк стоит её выставить вручную */
}
.header {
flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}
.main {
flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}<body> в wrapper и задать ему нужные стили:<head>
<style>
.wrapper{
min-width: 320px;
overflow: hidden;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- всякие штучки -->
</div>
</body><span> поставьте пробел.<div class="block"><span>1</span> <span>2</span> <span>3</span></div>