Селектори CSS

Селектори CSS

Селектори CSS є основою будь-якої стильної веб-сторінки. Вони націлені на елементи HTML на ваших сторінках, дозволяючи додавати стилі на основі їх ідентифікатора, класу, типу, атрибута тощо. У цьому посібнику ми розповімо про тонкощі селекторів CSS та їх ключову роль у покращенні естетики та взаємодії з користувачами ваших веб-сторінок.

Типи селекторів CSS

Селектори CSS бувають різних типів, кожен зі своїм унікальним способом вибору елементів HTML. Давайте дослідимо їх:

Селектори CSS опис

Прості селектори

Він використовується для вибору елементів HTML на основі їх імені елемента, ідентифікатора, атрибутів тощо

Універсальний селектор Вибирає всі елементи на сторінці.
Селектор атрибутів Націлює елементи на основі значень їхніх атрибутів.
Селектор псевдокласів Вибирає елементи на основі їх стану або положення, наприклад :hover> для ефектів наведення.
Селектори комбінаторів Комбінуйте селектори, щоб визначити зв’язки між елементами, наприклад нащадками ( > ) або дитина ( >> ).
Селектор псевдоелементів Вибирає певні частини елемента, наприклад ::before> або ::after> .

Зміст

Прості селектори

Прості селектори містять наведені нижче класи.

Простий селектор опис
Селектор елементів Вибирає елементи HTML на основі їхніх імен тегів.
Селектор ідентифікатора Націлюється на елемент HTML із певним атрибутом id.
Селектор класу Вибирає елементи з певним атрибутом класу.

приклад: У цьому прикладі ми напишемо код, щоб краще зрозуміти селектори та їх використання.

HTML
      CSS Selectortitle> <link rel='stylesheet' href='style.css' />голова> <body>  <h1>Зразок заголовкаh1> <p>Це Вміст у першому абзаціp> <div id='div-container'>Це div з ідентифікатором div-container div> <p>Це абзац із класом абзац-клас p> body> html> </pre>  </code>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Ми застосуємо правила CSS до наведеного вище прикладу. </span> </p>  <h2 id='element-selector'>  <b>  <strong>Селектор елементів </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>  <span>селектор елемента </span>  <span>вибирає елементи HTML на основі імені елемента (або тегу), наприклад p, h1, div, span тощо. </span> </p>  <p dir='ltr'>  <b>  <strong>ПРИМІТКА : </strong>  </b>  <span>У наведеному вище прикладі використовується наступний код. Ви можете побачити правила CSS, застосовані до всіх </span>  <span> </span> </p> <p>  <span>теги і </span> </p> <h1>теги. <p> </p>  </h1> <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>h1 {  color: red;  font-size: 3rem; } p {  color: white;  background-color: gray; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Element-Selectors-Example-output'> <p>Вихід селектора елементів CSS </p>  <h2 id='id-selector'>  <b>  <strong>Селектор ідентифікатора </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>   <b>  <strong>селектор id </strong>  </b>   <span>використовує </span>   <i>  <em>атрибут id </em>  </i>   <span>елемента HTML, щоб вибрати певний елемент. </span>  <b>  <strong>  </strong>  </b>  <span>Ан </span>  <b>  <strong>id </strong>  </b>  <span>елемента є унікальним на сторінці для використання </span>  <b>  <strong>ідентифікатор </strong>  </b>  <span>селектор. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Наступний код використовується у наведеному вище прикладі за допомогою селектора id. </span> </p>  <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>#div-container{  color: blue;  background-color: gray; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt='CSS-Id-selectors-example-output'> <p>Приклад вихідних даних CSS ID Selectors </p>  <h2 id='class-selector'>  <b>  <strong>Селектор класу </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>   <b>  <strong>селектор класу </strong>  </b>   <span>вибирає елементи HTML з певним атрибутом класу. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Наступний код використовується у наведеному вище прикладі за допомогою селектора класу. Щоб використовувати селектор класу, ви повинні використовувати ( . ) після імені класу в CSS. Це правило буде застосовано до елемента HTML з атрибутом class </span>  <i>  <em>параграф-клас </em>  </i>  <span> </span> </p>  <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>.paragraph-class {  color:white;  font-family: monospace;  background-color: purple; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt='CSS-Class-Selectors-Example-Output'> <p>Приклад виведення селектора класу CSS </p>  <h2 id='universal-selector'>  <b>  <strong>Універсальний селектор </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>  <span>Універсальний селектор </span>  <span>(*) у CSS використовується для вибору всіх елементів у документі HTML. Він також включає інші елементи, які знаходяться всередині під іншим елементом. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Наступний код використовується у наведеному вище прикладі з використанням універсального селектора. Це правило CSS буде застосовано до кожного елемента HTML на сторінці: </span> </p>  <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>* {  color: white;  background-color: black; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt='CSS-Universal-Selector-Example-Output'> <p>Приклад результату універсального селектора CSS </p>  <h2 id='group-selector'>  <b>  <strong>Селектор груп </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>  <b>  <strong>Селектор груп </strong>  </b>  <span>використовується для стилізації всіх елементів, розділених комами, однаковим стилем. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Припустімо, що ви хочете застосувати спільні стилі до різних селекторів, замість того, щоб писати правила окремо, ви можете записати їх у групах, як показано нижче. </span> </p>  <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>#div-container, .paragraph-class, h1{  color: white;  background-color: purple;  font-family: monospace;  } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt='CSS-Group-Selector-Example-Output'> <p>Приклад результату селектора групи CSS </p>  <h2 id='attribute-selector'>  <b>  <strong>Селектор атрибутів </strong>  </b>  </h2> <p dir='ltr'> <span>The </span>   <b>  <strong>селектор атрибутів </strong>  </b>   <span>[атрибут] використовується для вибору елементів із заданим атрибутом або значенням атрибута. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Наступний код використовується у наведеному вище прикладі за допомогою селектора атрибутів. Це правило CSS буде застосовано до кожного елемента HTML на сторінці: </span> </p>  <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>[href] {  background-color: lightgreen;  color: black;  font-family: monospace;  font-size: 1rem; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt='CSS-Attribute-Selectros-Example-Output'> <p>Вихідні дані атрибута CSS Selectros </p>  <h2 id='pseudoclass-selector'>  <b>  <strong>Селектор псевдокласів </strong>  </b>  </h2> <p dir='ltr'> <span>Він використовується для стилізації особливого типу стану будь-якого елемента. Наприклад, він використовується для стилізації елемента, коли на нього наводиться курсор миші. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Ми використовуємо одну двокрапку (:) у випадку a </span>  <span>Селектор псевдокласів </span>  <span>. </span> </p>  <p dir='ltr'>  <b>  <strong>Синтаксис: </strong>  </b>  </p>  <pre>Selector:Pseudo-Class {  Property: Value; } </pre> <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>h1:hover{  background-color: aqua; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Pseudo-Selector-Example-Output'> <p>Приклад вихідних даних псевдоселектора CSS </p>  <h2 id='pseudoelement-selector'>  <b>  <strong>Селектор псевдоелементів </strong>  </b>  </h2> <p dir='ltr'> <span>Він використовується для стилізації будь-якої конкретної частини елемента. Наприклад, він використовується для стилізації першої літери або першого рядка будь-якого елемента. </span> </p>  <p dir='ltr'>  <b>  <strong>Примітка: </strong>  </b>  <span>Ми використовуємо подвійну двокрапку (::) у випадку a </span>  <span>Селектор псевдоелементів </span>  <span>. </span> </p>  <p dir='ltr'>  <b>  <strong>Синтаксис: </strong>  </b>  </p>  <pre>Selector:Pseudo-Element{  Property:Value;  } </pre> <h3>  <b>  <strong>CSS: </strong>  </b>  </h3> <pre>p::first-line{  background-color: goldenrod; } </pre> <p dir='ltr'>  <b>  <strong>Вихід: </strong>  </b>  </p>  <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt='CSS-Pseudo-Element-Selector-Example-Output'> <p>Приклад виведення селектора псевдоелементів CSS </p>  <p dir='ltr'>  <br> </p>  <br>  <br>
                     </div>

                     <!-- Article Footer with Prominent Share Buttons -->
                     <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
                          <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
                              <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
                                 <i class="fa fa-share-alt text-tech-500"> </i>
                                Поділитися                              </h4>
                             
                              <div class="flex flex-wrap justify-center gap-3">
                                 <!-- Twitter -->
                                 <a href="https://twitter.com/intent/tweet?text=Селектори CSS&url=https://www.techcodeview.com/uk/css-selectors" 
                                   target="_blank" rel="noopener noreferrer" 
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-twitter text-lg"> </i>
                                     <span class="hidden sm:inline">Twitter </span>
                                 </a>

                                 <!-- Facebook -->
                                 <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/uk/css-selectors" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-facebook text-lg"> </i>
                                     <span class="hidden sm:inline">Facebook </span>
                                 </a>
                                
                                 <!-- LinkedIn -->
                                 <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/uk/css-selectors&title=Селектори CSS" 
                                   target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
                                     <i class="fa fa-linkedin text-lg"> </i>
                                     <span class="hidden sm:inline">LinkedIn </span>
                                 </a>
                              </div>
                          </div>
                     </div>
                </article>

                <!-- Comments Placeholder / Random Articles -->
                <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
                     <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
                        Вам Може Сподобатися                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div class="group">
                              <a href="/uk/what-is-high-school-exit-exam-1311362" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/blog/38/what-is-high-school-exit-exam.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Що таке випускний іспит із середньої школи? Як ви проходите?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/uk/what-is-high-school-exit-exam-1311362">Що таке випускний іспит із середньої школи? Як ви проходите? </a>
                              </h4>
                         </div> <div class="group">
                              <a href="/uk/computer-registers" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                 <img loading="lazy" src="https://techcodeview.com/img/coa-tutorial/58/computer-registers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Комп'ютерні регістри" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                              </a>
                              <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                 <a href="/uk/computer-registers">Комп'ютерні регістри </a>
                              </h4>
                         </div>
                     </div>
                </div>
             </div>

             <!-- SECONDARY COLUMN (SIDEBAR) -->
             <!-- Aside Column -->
 <div class="lg:col-span-4 space-y-8">
	
	 <!-- Best Articles Widget -->
	 <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
		 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
                 <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
                Кращі Статті             </h2>
		 </div>
		
		 <!-- Owl Carousel Preserved Container -->
		 <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
			 <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/adjacent-angles-definition">
						 <img src="https://techcodeview.com/img/definitions/64/adjacent-angles-definition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Означення суміжних кутів" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/adjacent-angles-definition" class="hover:text-tech-500 transition-colors line-clamp-3">Означення суміжних кутів </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/how-save-file-vi-vim-editor-quit">
						 <img src="https://techcodeview.com/img/geeks-premier-league-2023/29/how-save-file-vi-vim-editor-quit.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як зберегти файл у редакторі Vi / Vim і вийти" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/how-save-file-vi-vim-editor-quit" class="hover:text-tech-500 transition-colors line-clamp-3">Як зберегти файл у редакторі Vi / Vim і вийти </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/complete-list-ap-courses-1311440">
						 <img src="https://techcodeview.com/img/blog/63/complete-list-ap-courses.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Повний список курсів і тестів AP" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/complete-list-ap-courses-1311440" class="hover:text-tech-500 transition-colors line-clamp-3">Повний список курсів і тестів AP </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/mysql-regexp_like-function">
						 <img src="https://techcodeview.com/img/mysql-tutorial/61/mysql-regexp_like-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Функція MySQL REGEXP_LIKE()." class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/mysql-regexp_like-function" class="hover:text-tech-500 transition-colors line-clamp-3">Функція MySQL REGEXP_LIKE(). </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/difference-between-intellij-idea">
						 <img src="https://techcodeview.com/img/intellij-idea-tutorial/88/difference-between-intellij-idea.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Різниця між IntelliJ Idea та Eclipse" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/difference-between-intellij-idea" class="hover:text-tech-500 transition-colors line-clamp-3">Різниця між IntelliJ Idea та Eclipse </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/arraylist-java">
						 <img src="https://techcodeview.com/img/java-util-package/98/arraylist-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="ArrayList в Java" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/arraylist-java" class="hover:text-tech-500 transition-colors line-clamp-3">ArrayList в Java </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/filenotfoundexception-java">
						 <img src="https://techcodeview.com/img/java-tutorial/70/filenotfoundexception-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="FileNotFoundException у Java" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/filenotfoundexception-java" class="hover:text-tech-500 transition-colors line-clamp-3">FileNotFoundException у Java </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/gamepigeon-android">
						 <img src="https://techcodeview.com/img/android-tutorial/85/gamepigeon-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="GamePigeon для Android" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/gamepigeon-android" class="hover:text-tech-500 transition-colors line-clamp-3">GamePigeon для Android </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/best-summary-analysis-1311272">
						 <img src="https://techcodeview.com/img/blog/19/best-summary-analysis.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Найкращий короткий зміст та аналіз: Великий Гетсбі, глава 6" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/best-summary-analysis-1311272" class="hover:text-tech-500 transition-colors line-clamp-3">Найкращий короткий зміст та аналіз: Великий Гетсбі, глава 6 </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE --> <!-- ARTICLE -->
			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
					 <a href="/uk/how-run-powershell-script-from-cmd">
						 <img src="https://techcodeview.com/img/how/91/how-run-powershell-script-from-cmd.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як запустити сценарій PowerShell з CMD?" class="w-full h-full object-cover">
					 </a>
				 </div>
				 <div class="flex-1 min-w-0">
					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                         <a href="/uk/how-run-powershell-script-from-cmd" class="hover:text-tech-500 transition-colors line-clamp-3">Як запустити сценарій PowerShell з CMD? </a>
                     </h4>
				 </div>
			 </article>
			 <!-- /ARTICLE -->
		 </div>
		

         <!-- Categories -->
		 <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Категорія </h2>
		 </div>
		 <div class="flex flex-wrap gap-2">
             <a href="/uk/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Блог
             </a> <a href="/uk/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Перетворення Java
             </a> <a href="/uk/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Математика
             </a> <a href="/uk/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Колекції Java
             </a> <a href="/uk/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Відмінності
             </a> <a href="/uk/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                Рядок Java
             </a>
         </div>

         <!-- Interesting Articles Widget -->
		 <div class="mt-8">
			 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
				 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Цікаві Статті </h2>
			 </div>
			
			 <div id="owl-carousel-4" class="owl-carousel owl-theme">
				 <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/c-tutorial/89/c-overloading-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Перевантаження C++ (функція та оператор)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/c-tutorial/">Підручник C++ </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/c-overloading-function">Перевантаження C++ (функція та оператор) </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/bash-tutorial/63/bash-if-else.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash If Else" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/bash-tutorial/">Bash Підручник </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/bash-if-else">Bash If Else </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/cbse-class-11/00/basic-input-output-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Основи введення/виведення в C++" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/cbse-class-11-cat/">Cbse - 11 Клас </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/basic-input-output-c">Основи введення/виведення в C++ </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/python-string/64/how-index-slice-strings-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Як індексувати та розділяти рядки в Python?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/python-string/">Python-Рядок </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/how-index-slice-strings-python">Як індексувати та розділяти рядки в Python? </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/mysql-tutorial/72/mysql-create-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL CREATE TABLE" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/mysql-tutorial/">Підручник З Mysql </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/mysql-create-table">MySQL CREATE TABLE </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE --> <!-- ARTICLE -->
				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
					 <div class="absolute inset-0">
						 <img src="https://techcodeview.com/img/blog/80/10-famous-sonnet-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="10 відомих прикладів сонетів, пояснення" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
					 </div>
					 <div class="absolute bottom-0 left-0 p-4">
						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/uk/blog/">Блог </a> </div>
						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/uk/10-famous-sonnet-examples-13190">10 відомих прикладів сонетів, пояснення </a> </h4>
					 </div>
				 </article>
				 <!-- /ARTICLE -->
			 </div>
		 </div>
	 </div>
 </div>
 <!-- /Aside Column -->         </div>
        </div>
     </div>

 <footer class="site-footer">
         <div class="container">
             <span class="footer-links">
                Copyright ©2026 Всі Права Захищені | 
                 <a href="//www.techcodeview.com/hu/">techcodeview.com </a> | 
                 <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності </a> | 
                 <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас </a> | 
                 <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності </a> 
             </span>
         </div>
     </footer>
 
     <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
     <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>    
     <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>     
	 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
	 <script>
    !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
        #toTopBtn {
            position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        #toTopBtn:hover { background-color: #0284c7; }
    `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
     </script>
 </body>
 </html>