სელექტორები და ფსევდო კლასები

selector1,
selector2 {
  /* სტილიზაცია */
}

<h6>ყველაზე პატარა სათაური</h6>
<p>პარაგრაფი</p>

h6,
p {
  color: red;
  font-size: 16px;
}

selector1 selector2 {
  /* სტილიზაცია */
}

<ul>
  <li><a href="/index.html">მთავარი</a></li>
  <li><a href="/editor.html">ედიტორი</a></li>
  <li><a href="/guide.html">გზამკლევი</a></li>
</ul>
<a href="/article.html">სტატიის ბმული</a>

a {
  color: red;
}

ul li a {
  color: green;
}

selector1 > selector2 {
  /* სტილიზაცია */
}

<div>
  <span>პირველი span</span> <span>მეორე span <span>მესამე span</span></span>
</div>
<span>პირველი სპანი div-ის გარეთ</span>

div > span {
  color: red;
}
span {
  color: steelblue;
}

former_element + target_element {
  /* სტილიზაცია */
}

<p>რა არის HTML?</p>
<img src="/assets/images/html-css.png" alt="HTML & CSS ლოგო" />
<p>HTML (HyperText Markup Language - ჰიპერტექსტური მარკაპის ენა) არის მარკაპის ენა, რომელიც მუითებებს ბრაუზერს, თუ როგორი სტრუქტურა მისცეს ვებგვერდს. HTML-ში გამოიყენება ელემენტები, რომ ტექსტური კონტენტი შევკრათ ან მოვნიშნოთ (mark up), რათა ამ კონტენტს გარკვეული გარეგნობა, ქცევა ან დანიშნულება შეეძინოს.</p>
<p>HTML შედგება ელემენტებისგან, რომლებიც გამოიყენება კონტენტის სხვადასხვა ნაწილის შესაფუთად, რათა მას მიენიჭოს განსხვავებული გარეგნობა ან დანიშნულება.</p>

img + p {
  color: orange;
}

former_element ~ target_element {
  /* სტილიზაცია */
}

<p>პირველი პარაგრაფი</p>
<img src="/assets/images/js.png" alt="JS ლოგო" />
<p>მეორე პარაგრაფი</p>
<p>მესამე პარაგრაფი</p>
<h6>პირველი სათაური</h6>
<p>მეოთხე პარაგრაფი</p>

img ~ p {
  color: steelblue;
}

img + p {
  /* მხოლოდ პირველი პარაგრაფის დასტილვა, რომელიც მოთავსებულია სურათის შემდეგ */
  text-decoration: underline red;
}

p {
  color: green;
}

selector:pseudo-class {
  სტილიზაცია
}

<button>Hover me</button>

button:hover {
  color: red;
}

<button>გააგზავნე</button>

button {
  color: red;
}

button:hover {
  color: blue;
}

button:active {
  color: green;
}

<input placeholder="სახელი" />

input:focus {
  background-color: antiquewhite;
}

<button>შეეცადე <kbd>tab</kbd> ღილაკით ფოკუსი</button>

button:focus-visible {
  outline: none;
  border: 1px solid red;
}

<form>
  <label for="nameInput">სახელი:</label> <br />
  <input id="nameInput" name="name" placeholder="თქვენი სახელი" /> <br />
  <button>გაგზავნა</button>
</form>

form {
  width: max-content;
  margin: auto;
  padding: 16px;
  border: 1px solid black;
}

form * {
  margin-top: 15px;
}

form:focus-within {
  border: 1px dashed red;
}

form input:focus,
form button:focus {
  background-color: antiquewhite;
}

form input:focus-visible,
form button:focus-visible {
  outline: none;
  border: 1px solid red;
}

<p>პირველი პარაგრაფი</p>
<p>მეორე პარაგრაფი</p>

p:first-child {
  color: red;
}

<p>პირველი პარაგრაფი</p>
<p>მეორე პარაგრაფი</p>

p:last-child {
  color: red;
}

<ul>
  <li>პირველი ელემენტი</li>
  <li>მეორე ელემენტი</li>
  <li>მესამე ელემენტი</li>
  <li>მეოთხე ელემენტი</li>
  <li>მეხუთე ელემენტი</li>
  <li>მეექვსე ელემენტი</li>
  <li>მეშვიდე ელემენტი</li>
  <li>მერვე ელემენტი</li>
  <li>მეცხრე ელემენტი</li>
  <li>მეათე ელემენტი</li>
</ul>

ul li:nth-child(2) {
  text-decoration: underline red;
}

ul li:nth-child(even) {
  color: red;
}

ul li:nth-child(odd) {
  color: orange;
}

ul li:nth-child(3n) {
  color: blue;
}

<div class="board">
  <div class="row">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <!-- მსგავსი 7 row div -->
</div>

div.board {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 1px solid black;
}

div.board div.square {
  width: 100%;
  height: 100%;
  background-color: #ebecd0;
}

div.board div.row:nth-child(odd) div.square:nth-child(even),
div.board div.row:nth-child(even) div.square:nth-child(odd) {
  background-color: #739552;
}

<ul>
  <li>პირველი ელემენტი</li>
  <li>მეორე ელემენტი</li>
  <li>მესამე ელემენტი</li>
  <li>მეოთხე ელემენტი</li>
</ul>

ul li:nth-of-type(3) {
  color: red;
}

ul li:nth-of-type(even) {
  color: blue;
}

<ul>
  <li>პირველი ელემენტი</li>
  <p>პარაგრაფი</p>
  <li>მეორე ელემენტი</li>
  <li>მესამე ელემენტი</li>
  <li>მეოთხე ელემენტი</li>
</ul>

ul li:nth-of-type(2) {
  color: blue;
}

ul li:nth-child(2) {
  color: red;
}