CSSтегиндеги тууган селектору
Тууган селектору ~ бир эне элементтин ичинде
берилген элементтен кийин жайгашкан бардык элементтерди
тандоого мүмкүндүк берет.
Мисал
Келгиле, h2 теглеринен кийин жайгашкан
бардык p тегдерине кайрылып, аларды
кызыл түскө боёйлу:
<div>
<h2>текст</h2>
<p>
+++
</p>
<p>
+++
</p>
<p>
+++
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Мисал
Келгиле, .test классы бар элементтерден
кийин жайгашкан бардык p тегдерине кайрылып,
аларды кызыл түскө боёйлу:
<div>
<p class="test">
текст
</p>
<p>
+++
</p>
<p>
+++
</p>
</div>
<p>
---
</p>
.test ~ p {
color: red;
}
:
Мисал
Келгиле, .test классы бар элементтерден
кийин жайгашкан бардык .elem классы бар
элементтерге кайрылып, аларды кызыл түскө боёйлу:
<div>
<p class="test">
текст
</p>
<p class="elem">
+++
</p>
<p>
---
</p>
<p class="elem">
+++
</p>
</div>
<p>
---
</p>
.test ~ .elem {
color: red;
}
:
Практикалык тапшырмалар
Берилген код:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="elem">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
#elem элементинен кийин дароо жайгашкан
бардык элементтерди тандаган селекторду жазыңыз.