4. CSS 2

Selektorlarni birgalikda ishlatish
a {
font-size:16px;
text-decoration: dashed;
}
.qizil-fon {
background-color: tomato;
}
.yashil-fon {
background-color: turquoise;
}
.sariq-matn {
color: yellow;
}
.oq-matn {
color: white;
}
...
This is div block.
This is
link
QODIRBEK MAXAROV

Selektorlar
Ishlatilishi bo'yicha selektorlarning quyidagi ko'rinishlari mavjud:
Kombinatorlar
Atribut selektorlari
Psevdosinflar
Psevdoelementlar
QODIRBEK MAXAROV

Kombinatorlar
Guruhlash (grouping selector (,))
Avlod selektorlar (descendant selector (space))
Farzand selektorlar (child selector (>))
Qo'shni selektorlar (adjacent sibling selector (+))
Keyingi selektorlar (general sibling selector (~))
QODIRBEK MAXAROV

Selektorlarni guruhlash
div {
color: tomato;
}
p {
color: tomato;
}
h2 {
color: tomato;
}
h3 { color: tomato;
}
QODIRBEK MAXAROV
div, p, h1, h2 {
color: tomato;
}

Avlod selektorlar
QODIRBEK MAXAROV
element element {
/* stil xossalari */
}

Avlod selektorlar
body{
text-align: center;
}
div p{
color: blue;
font-size:18px;
font-weight: bold;
text-align: center;
}
...
This is 1st paragraph in the div.
This is 2nd paragraph in the div.
This is the span element in the div
This is the paragraph in the span. It will also be affected.
Paragraph 4. It will not be affected because it is not in the div.
QODIRBEK MAXAROV

Farzand selektorlar
QODIRBEK MAXAROV
element > element {
/* stil xossalari */
}

Farzand selektorlar
body {
font-size: 14px;
text-align: center;
}
div > p {
color: blue;
font-size:18px;
font-weight: bold;
text-align: center;
}
...
Child selector (>) property
It is the first paragraph
It is the second paragraph
This is third paragraph in h3 element
This is the fourth paragraph which is the child of div element
This is the fifth paragraph and also get selected because it is also the child of div element
QODIRBEK MAXAROV

Qo'shni selektorlar
QODIRBEK MAXAROV
element + element {
/* stil xossalari */
}

Qo'shni selektorlar
body {
font-size: 14px;
text-align: center;
}
p + p {
color: blue;
font-size:18px;
font-weight: bold;
text-align: center;
}
...
Adjacent sibling selector (+) property
It is the first paragraph
It is the second paragraph which is immediately next to the first paragraph, and it get selected.
This is the div element
This is the third paragraph which does not get affected
This paragraph is also selected because it immediately next to third paragraph
QODIRBEK MAXAROV

Keyingi selektorlar
QODIRBEK MAXAROV
element ~ element {
/* stil xossalari */
}

Keyingi selektorlar
body {
font-size: 14px;
text-align: center;
}
h1 ~ p {
color: blue;
font-size:18px;
font-weight: bold;
text-align: center;
}
...
General sibling selector (~) property
It is the first paragraph element which will get effected.
It is the div element
It is the paragraph under the div element
It is the paragraph element after the div
It is the paragraph element which will also get affected
QODIRBEK MAXAROV

Atribut selektorlari
QODIRBEK MAXAROV

Atribut selektorlar
[title] {
border: 5px solid red;
}
[title=image] {
border: 5px solid green;
}
img[title~=flower] {
border: 5px solid blue;
}
img[title|=flo] {
border: 5px solid orange;
}
...
This is div block (flo-is-red).
This is div block (image).
QODIRBEK MAXAROV

Atribut selektorlar
a[href^="http://"] {
font-weight: bold;
text-decoration: none;
}
a[href$=".ru"] {
background: url(images/ru.png) no-repeat 0 4px;
padding-left: 20px;
}
a[href$=".uz"] {
background: url(images/uz.png) no-repeat 0 4px;
padding-left: 20px;
}
a[href*="ytit"] {
background-color: yellow;
}
...
YTIT web sayti
Hukuman portali
Biz haqimizda
mail.ru
yandex.ru
QODIRBEK MAXAROV

Psevdosinflar
Psevdosinflar elementlarning dinamik holatini belgilaydi, ular foydalanuvchi harakati bilan o'zgaradi. Masalan, havola ustiga sichqoncha kursori kelganda rangini o'zgartirishi.
Selektor:Psevdosinf { stillar }
Turlari:
element holatini aniqlovchi (dinamik)
elementlar ierarxiyasiga (strukturasiga) bog'liq
Psevdosinflarni kombinatsiya ko'rinishida ishlatish mumkin:
Selektor:Psevdosinf1:Psevdosinf2 { stillar }
QODIRBEK MAXAROV

Element holatini aniqlovchi psevdosinflar
:active – element foydalanuvchi tomonidan aktivlashtirilganda
:link – o'tilmagan havolalar uchun stil
:hover – sichqoncha kursori element ustida bo'lganda
:visited – o'tilgan havolalar uchun stil
:lang(
) – lang atributi qiymati
ga teng elementlar uchun
Namuna: a:hover { stillar }
Ushbu psevdosinflarni kombinatsiya ko'rinishida ishlatish mumkin:
a:visited:hover { stillar } a:link:visited { stillar }
QODIRBEK MAXAROV

Element holatini aniqlovchi psevdosinflar
:checked – tanlangan
element uchun
:disabled – o'chirilgan element uchun
:enabled – o'chirilmagan
element uchun
:focus –
element focus olganda
:in-range – aniqlangan qiymatlar chegarasida qiymat olgan
element uchun
:invalid – noto'g'ri qiymatli
elementi uchun
:optional – "required" atributi bo'lmagan
elementi uchun
:out-of-range – aniqlangan qiymatlar chegarasida qiymat olmagan
element uchun
:read-only – "readonly" atributi bo'lgan
elementi uchun
:read-write – "readonly" atributi bo'lmagan
elementi uchun
:required – "required" atributi bo'lmagan
elementi uchun
:valid – to'g'ri qiymatli
elementi uchun
QODIRBEK MAXAROV

QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
A:link {
color: #036; /* O'tilmagan havola */
}
A:visited {
color: #0f0; /* O'tilgan havola */
}
A:hover {
color: #f00; /* Sichqoncha kursori kelganda */
}
A:active {
color: #ff0; /* Aktiv havola */
}
...
Havola 1
|
Havola 2
|
Havola 3

QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
table { border-spacing: 0; }
td { padding: 4px; }
tr:hover { background: #fc0; }
...
...
Слайд 22
QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
input:focus {
color: red;
}
...
Слайд 23
QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
input:disabled {
border: 2px dashed grey;
}
input:invalid {
color:
red;
border: 2px solid red;
}
input:valid {
color: green;
border: 2px solid green;
}
:focus:required {
background-color: coral;
color: cornsilk;
}
...
Majburiy maydon
Слайд 24
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
:empty – vorisi bo'lmagan element uchun
:first-child – o'zining
ajdodiga birinchi voris bo'lgan element uchun (barcha elementlar ichidan)
:first-of-type – o'zining ajdodiga birinchi voris bo'lgan element uchun (faqat joriy selektorlar ichidan)
:last-child – o'zining ajdodiga oxirgi voris bo'lgan element uchun
:last-of-type – o'zining ajdodiga oxirgi voris bo'lgan element uchun
:not(
) -
bo'lmagan barcha elementlar uchun
:nth-child(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun
:nth-last-child(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun
:nth-last-of-type(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun
:nth-of-type(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun
:only-of-type – o'zining ajdodiga yagona voris element uchun
:only-child – o'zining ajdodiga yagona voris element uchun
:target – aktiv #id element uchun
Слайд 25
QODIRBEK MAXAROV
p:empty {
width: 100px;
height: 20px;
background: #ff0000;
}
...
A paragraph.
Another
paragraph.
Elementlar ierarxiyasiga
bog'liq psevdosinflar
Слайд 26
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
p {
color: blue;
}
:not(p) {
color: red;
}
...
This is
a heading
This is a paragraph.
This is another paragraph.
This is some text in a div element.
Link to YTIT!
Слайд 27
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
<br> p:first-child {<br> background: red;<br> }<br> h4:first-of-type {<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="QODIRBEK MAXAROV Elementlar ierarxiyasiga bog&#39;liq psevdosinflar p:first-child { background: red; } h4:first-of-type" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/967806/slide-26.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/967806/slide-26.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/967806/slide-26.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-26.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-26.jpg" class="slides-image"><!----><div class="slides-content">background: green;<br> }<br>
...
First Child
First of type Child
Third Child
Fourth Child
Слайд 28
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
<br> p:only-child {<br> background: red;<br> }<br>
span:only-of-type {<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="QODIRBEK MAXAROV Elementlar ierarxiyasiga bog&#39;liq psevdosinflar p:only-child { background: red; } span:only-of-type" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/967806/slide-27.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/967806/slide-27.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/967806/slide-27.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-27.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-27.jpg" class="slides-image"><!----><div class="slides-content">background: yellow;<br> }<br>
...
This is a paragraph.
This is a span.
This is a paragraph.
Слайд 29
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
nth-qoidalar quyidagi qiymat qabul qilishi mumkin:
son
kalit so'z (odd,
even)
an+b ko'rinishidagi ifoda
Слайд 30
QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
tr:nth-child(odd) {
background: #FFBFBF;
}
tr:nth-child(n+4):nth-child(odd) {
background: #FFBFBF;
}
Слайд 31
QODIRBEK MAXAROV
Psevdoelementlar
Psevdoelementlar – "virtual" element yaratish uchun ishlatiladi.
::before
::after
::first-letter
::first-line
::selection
Слайд 32
QODIRBEK MAXAROV
Psevdoelementlar
p.new::before {
content: "!!!";
color: blue;
font: 40px Georgia;
}
p.new::after {
content:
"";
width: 40px;
height: 20px;
background-image: url(images/flag-gb.svg);
background-size: 40px 20px;
background-repeat: no-repeat;
display: inline-block;
}
...
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
Слайд 33
QODIRBEK MAXAROV
Psevdoelementlar
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
div
{
width: 75%;
}
...
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
Слайд 34
QODIRBEK MAXAROV
Psevdoelementlar
/*::-moz-selection Firefox 62.0 gacha */
::selection {
color: red;
background: yellow;
}
The Rector
of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
Имя файла: 4.-CSS-2.pptx
Количество просмотров: 40
Количество скачиваний: 0
Скачать
- Предыдущая
O Canada! Our home and native land!
Следующая -
Тренажер. Газовые законы
Похожие презентации
SDSM. Sample distribution shadow maps
Средство отображения информации: принцип действия,виды,назначение
Разработка внутрикорпоративного сайта для БУ Республиканская детская клиническая больница
Общая структура автоматизированной информационно-справочной системы
Информатика и информационно-коммуникационные технологии
Базы Данных Поляков
Networks and the effects of using them
ГИС Независимый регистратор в 2019, 2020 годах и в перспективе
Платформа бренда Вконтакте
Прикладное программное обеспечение. 1 занятие
Стрижка собак
Разработка информационной базы системы управления деканатов института УиКБ
Правила верстки электронных курсов
Разработка веб-сайта для выбора автомобиля по заданным пользователем критериям
informatio (копия)
Введение в специальность. История ИКТ, IT и HTML. Лекция 2
Логические операции
Пресс-портрет
Потоки и управление ими
Аватврия. Комикс
Системы счисления (нули и единицы)
Презентация на тему Язык Паскаль
Создание SQL запросов в MS Access для манипулирования данными
Представление информации в форме таблиц
Информация и информационные процессы. Ключевые слова
Методический конструктор для учителей
Пионеры Гродненщины. PROДвижение по материалам педагоговорганизаторов, участников интернет-проекта
Создание и управление рабочей группой проекта
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
#
Familiya
Ism
Otasining ismi
1
Alimov
Karim
Qosimovich
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H}},categories:{result:[{id:I,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:J,pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:"Разное",pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:I,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:967806,name:"4. CSS 2",category:J,count:35,jpg:"jpg\u002F967806",hits:40,download:a,h1:K,meta:{h1:K,title:"4. CSS 2 презентация",description:"4. CSS 2 презентация, доклад, проект, Информатика ",keywords:"4. CSS 2, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему 4. CSS 2, из раздела: Информатика.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003ESelektorlarni birgalikda ishlatish\u003Cbr\u003E\u003Cp\u003Ea {\u003Cbr\u003E font-size:16px;\u003Cbr\u003E text-decoration: dashed;\u003Cbr\u003E}\u003Cbr\u003E.qizil-fon {\u003Cbr\u003E background-color: tomato;\u003Cbr\u003E}\u003Cbr\u003E.yashil-fon {\u003Cbr\u003E background-color: turquoise;\u003Cbr\u003E}\u003Cbr\u003E.sariq-matn {\u003Cbr\u003E color: yellow;\u003Cbr\u003E}\u003Cbr\u003E.oq-matn {\u003Cbr\u003E color: white;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cdiv class=\"yashil-fon oq-matn\"\u003EThis is div block.\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ca href=\"#\" class=\"qizil-fon sariq-matn\"\u003EThis is \t\u003Cspan class=\"oq-matn\"\u003Elink\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E \u003Cp\u003ESelektorlar\u003Cbr\u003E\u003Cp\u003EIshlatilishi bo'yicha selektorlarning quyidagi ko'rinishlari mavjud:\u003Cbr\u003EKombinatorlar\u003Cbr\u003EAtribut selektorlari\u003Cbr\u003EPsevdosinflar\u003Cbr\u003EPsevdoelementlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E",file:"4.-CSS-2.pptx",texts:["\u003Cp\u003ECSS\u003Cbr\u003E","\u003Cp\u003ESelektorlarni birgalikda ishlatish\u003Cbr\u003E\u003Cp\u003Ea {\u003Cbr\u003E font-size:16px;\u003Cbr\u003E text-decoration: dashed;\u003Cbr\u003E}\u003Cbr\u003E.qizil-fon {\u003Cbr\u003E background-color: tomato;\u003Cbr\u003E}\u003Cbr\u003E.yashil-fon {\u003Cbr\u003E background-color: turquoise;\u003Cbr\u003E}\u003Cbr\u003E.sariq-matn {\u003Cbr\u003E color: yellow;\u003Cbr\u003E}\u003Cbr\u003E.oq-matn {\u003Cbr\u003E color: white;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cdiv class=\"yashil-fon oq-matn\"\u003EThis is div block.\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ca href=\"#\" class=\"qizil-fon sariq-matn\"\u003EThis is \t\u003Cspan class=\"oq-matn\"\u003Elink\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003ESelektorlar\u003Cbr\u003E\u003Cp\u003EIshlatilishi bo'yicha selektorlarning quyidagi ko'rinishlari mavjud:\u003Cbr\u003EKombinatorlar\u003Cbr\u003EAtribut selektorlari\u003Cbr\u003EPsevdosinflar\u003Cbr\u003EPsevdoelementlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EKombinatorlar\u003Cbr\u003E\u003Cp\u003EGuruhlash (grouping selector (,))\u003Cbr\u003EAvlod selektorlar (descendant selector (space))\u003Cbr\u003EFarzand selektorlar (child selector (\u003E))\u003Cbr\u003EQo'shni selektorlar (adjacent sibling selector (+))\u003Cbr\u003EKeyingi selektorlar (general sibling selector (~))\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003ESelektorlarni guruhlash\u003Cbr\u003Ediv {\u003Cbr\u003E color: tomato;\u003Cbr\u003E}\u003Cbr\u003E\r\np {\u003Cbr\u003E color: tomato;\u003Cbr\u003E}\u003Cbr\u003E\r\nh2 {\u003Cbr\u003E color: tomato;\u003Cbr\u003E}\u003Cbr\u003E\r\nh3 {\u003Cbr\u003E color: tomato;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Ediv, p, h1, h2 {\u003Cbr\u003E color: tomato;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EAvlod selektorlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Eelement element { \u003Cbr\u003E \u002F* stil xossalari *\u002F \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EAvlod selektorlar\u003Cbr\u003E\u003Cp\u003Ebody{\u003Cbr\u003E text-align: center;\u003Cbr\u003E} \u003Cbr\u003Ediv p{\u003Cbr\u003E color: blue;\u003Cbr\u003E font-size:18px;\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E text-align: center;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003E This is 1st paragraph in the div. \u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E This is 2nd paragraph in the div. \u003C\u002Fp\u003E\u003Cbr\u003E \u003Cspan\u003E\u003Cbr\u003E This is the span element in the div\u003Cbr\u003E \u003Cp\u003E This is the paragraph in the span. \t It will also be affected. \u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fspan\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\r\n\u003Cp\u003E Paragraph 4. It will not be affected because it is not in the div. \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EFarzand selektorlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Eelement \u003E element { \u003Cbr\u003E \u002F* stil xossalari *\u002F \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EFarzand selektorlar\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003E font-size: 14px;\u003Cbr\u003E text-align: center;\u003Cbr\u003E} \u003Cbr\u003Ediv \u003E p {\u003Cbr\u003E color: blue;\u003Cbr\u003E font-size:18px;\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E text-align: center;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ch1\u003E Child selector (\u003E) property\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cp\u003E It is the first paragraph \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E It is the second paragraph \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Ch3\u003E\u003Cp\u003EThis is third paragraph in h3 element\u003C\u002Fp\u003E\u003C\u002Fh3\u003E\u003Cbr\u003E \u003Cp\u003E This is the fourth paragraph which is the child of \tdiv element \u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E This is the fifth paragraph and also get selected \tbecause it is also the child of div element \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EQo'shni selektorlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Eelement + element { \u003Cbr\u003E \u002F* stil xossalari *\u002F \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EQo'shni selektorlar\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003E font-size: 14px;\u003Cbr\u003E text-align: center;\u003Cbr\u003E} \u003Cbr\u003Ep + p {\u003Cbr\u003E color: blue;\u003Cbr\u003E font-size:18px;\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E text-align: center;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ch1\u003E Adjacent sibling selector (+) property\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cp\u003E It is the first paragraph \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E It is the second paragraph which is immediately next to the first paragraph, and it get selected. \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003E This is the div element \u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003E This is the third paragraph which does not get affected \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E This paragraph is also selected because it immediately next to third paragraph \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EKeyingi selektorlar\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Eelement ~ element { \u003Cbr\u003E \u002F* stil xossalari *\u002F \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EKeyingi selektorlar\u003Cbr\u003E\u003Cp\u003Ebody {\u003Cbr\u003E font-size: 14px;\u003Cbr\u003E text-align: center;\u003Cbr\u003E} \u003Cbr\u003Eh1 ~ p {\u003Cbr\u003E color: blue;\u003Cbr\u003E font-size:18px;\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E text-align: center;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ch1\u003EGeneral sibling selector (~) property\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cp\u003EIt is the first paragraph element which will get effected.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003E It is the div element\u003Cbr\u003E \u003Cp\u003E It is the paragraph under the div element \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EIt is the paragraph element after the div\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EIt is the paragraph element which will also get affected\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EAtribut selektorlari\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EAtribut selektorlar\u003Cbr\u003E\u003Cp\u003E[title] {\u003Cbr\u003E border: 5px solid red;\u003Cbr\u003E}\u003Cbr\u003E[title=image] {\u003Cbr\u003E border: 5px solid green;\u003Cbr\u003E}\u003Cbr\u003Eimg[title~=flower] {\u003Cbr\u003E border: 5px solid blue;\u003Cbr\u003E}\u003Cbr\u003Eimg[title|=flo] {\u003Cbr\u003E border: 5px solid orange;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cimg src=\"fl1.jpg\" title=\"flowers\" height=\"100\"\u003E\u003Cbr\u003E\u003Cimg src=\"fl3.jpg\" title=\"image\" height=\"100\"\u003E\u003Cbr\u003E\u003Cimg src=\"fl2.jpg\" title=\"this is flower\" height=\"100\"\u003E\u003Cbr\u003E\u003Cimg src=\"not.jpg\" title=\"flo-is-red\" height=\"100\"\u003E\r\n\u003Cdiv title=\"flo-is-red\"\u003EThis is div block (flo-is-red).\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cdiv title=\"image\"\u003EThis is div block (image).\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EAtribut selektorlar\u003Cbr\u003E\u003Cp\u003Ea[href^=\"http:\u002F\u002F\"] {\u003Cbr\u003E font-weight: bold;\u003Cbr\u003E text-decoration: none;\u003Cbr\u003E}\u003Cbr\u003E\r\na[href$=\".ru\"] {\u003Cbr\u003E background: url(images\u002Fru.png) no-repeat 0 4px;\u003Cbr\u003E padding-left: 20px;\u003Cbr\u003E}\u003Cbr\u003E\r\na[href$=\".uz\"] {\u003Cbr\u003E background: url(images\u002Fuz.png) no-repeat 0 4px;\u003Cbr\u003E padding-left: 20px;\u003Cbr\u003E}\u003Cbr\u003E\r\na[href*=\"ytit\"] {\u003Cbr\u003E background-color: yellow;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fytit.uz\"\u003EYTIT web sayti\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fgov.uz\"\u003EHukuman portali\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"about.html\"\u003EBiz haqimizda\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"https:\u002F\u002Fmail.ru\"\u003Email.ru\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"http:\u002F\u002Fyandex.ru\"\u003Eyandex.ru\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EPsevdosinflar\u003Cbr\u003E\u003Cp\u003EPsevdosinflar elementlarning dinamik holatini belgilaydi, ular foydalanuvchi harakati bilan o'zgaradi. Masalan, havola ustiga sichqoncha kursori kelganda rangini o'zgartirishi.\u003Cbr\u003ESelektor:Psevdosinf { stillar }\u003Cbr\u003ETurlari:\u003Cbr\u003Eelement holatini aniqlovchi (dinamik)\u003Cbr\u003Eelementlar ierarxiyasiga (strukturasiga) bog'liq\u003Cbr\u003E\u003Cbr\u003EPsevdosinflarni kombinatsiya ko'rinishida ishlatish mumkin:\u003Cbr\u003ESelektor:Psevdosinf1:Psevdosinf2 { stillar }\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003E:active – element foydalanuvchi tomonidan aktivlashtirilganda\u003Cbr\u003E:link – o'tilmagan havolalar uchun stil\u003Cbr\u003E:hover – sichqoncha kursori element ustida bo'lganda\u003Cbr\u003E:visited – o'tilgan havolalar uchun stil\u003Cbr\u003E:lang(\u003Ctil\u003E) – lang atributi qiymati \u003Ctil\u003Ega teng elementlar uchun\u003Cbr\u003ENamuna: a:hover { stillar }\u003Cbr\u003EUshbu psevdosinflarni kombinatsiya ko'rinishida ishlatish mumkin:\u003Cbr\u003Ea:visited:hover { stillar }\t\t\ta:link:visited { stillar }\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003E:checked – tanlangan \u003Cinput\u003E element uchun\u003Cbr\u003E:disabled – o'chirilgan \u003Cinput\u003E element uchun\u003Cbr\u003E:enabled – o'chirilmagan \u003Cinput\u003E element uchun\u003Cbr\u003E:focus – \u003Cinput\u003E element focus olganda\u003Cbr\u003E:in-range – aniqlangan qiymatlar chegarasida qiymat olgan \u003Cinput\u003E element uchun\u003Cbr\u003E:invalid – noto'g'ri qiymatli \u003Cinput\u003E elementi uchun\u003Cbr\u003E:optional – \"required\" atributi bo'lmagan \u003Cinput\u003E elementi uchun\u003Cbr\u003E:out-of-range – aniqlangan qiymatlar chegarasida qiymat olmagan \u003Cinput\u003E element uchun\u003Cbr\u003E:read-only – \"readonly\" atributi bo'lgan \u003Cinput\u003E elementi uchun\u003Cbr\u003E:read-write – \"readonly\" atributi bo'lmagan \u003Cinput\u003E elementi uchun\u003Cbr\u003E:required – \"required\" atributi bo'lmagan \u003Cinput\u003E elementi uchun\u003Cbr\u003E:valid – to'g'ri qiymatli \u003Cinput\u003E elementi uchun\u003Cbr\u003E\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003EA:link {\u003Cbr\u003E color: #036; \u002F* O'tilmagan havola *\u002F\u003Cbr\u003E}\u003Cbr\u003EA:visited {\u003Cbr\u003E color: #0f0; \u002F* O'tilgan havola *\u002F\u003Cbr\u003E}\u003Cbr\u003EA:hover {\u003Cbr\u003E color: #f00; \u002F* Sichqoncha kursori kelganda *\u002F\u003Cbr\u003E}\u003Cbr\u003EA:active {\u003Cbr\u003E color: #ff0; \u002F* Aktiv havola *\u002F\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ca href=\"1.html\"\u003EHavola 1\u003C\u002Fa\u003E |\u003Cbr\u003E\u003Ca href=\"2.html\"\u003EHavola 2\u003C\u002Fa\u003E |\u003Cbr\u003E\u003Ca href=\"3.html\"\u003EHavola 3\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003Etable { border-spacing: 0; }\u003Cbr\u003Etd { padding: 4px; }\u003Cbr\u003Etr:hover { background: #fc0; }\u003Cbr\u003E...\u003Cbr\u003E\u003Ctable width=\"400\" border=\"1\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Cth\u003E#\u003C\u002Fth\u003E\u003Cbr\u003E \u003Cth\u003EFamiliya\u003C\u002Fth\u003E\u003Cbr\u003E \u003Cth\u003EIsm\u003C\u002Fth\u003E\u003Cbr\u003E \u003Cth\u003EOtasining ismi\u003C\u002Fth\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E1\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003EAlimov\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003EKarim\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003EQosimovich\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E ...\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003Einput:focus {\u003Cbr\u003E color: red;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cform action=\"\"\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"text\" value=\"Matn\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"text\" value=\"Matn\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fform\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElement holatini aniqlovchi psevdosinflar\u003Cbr\u003E\u003Cp\u003Einput:disabled {\u003Cbr\u003E border: 2px dashed grey;\u003Cbr\u003E}\u003Cbr\u003Einput:invalid {\u003Cbr\u003E color: red;\u003Cbr\u003E border: 2px solid red;\u003Cbr\u003E}\u003Cbr\u003Einput:valid {\u003Cbr\u003E color: green;\u003Cbr\u003E border: 2px solid green;\u003Cbr\u003E}\u003Cbr\u003E:focus:required {\u003Cbr\u003E background-color: coral;\u003Cbr\u003E color: cornsilk;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cform action=\"\"\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"text\" value=\"Matn\" disabled\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"number\" min=\"10\" max=\"20\" value=\"30\" required\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"number\" min=\"10\" max=\"20\" value=\"15\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Ctextarea required\u003EMajburiy maydon\u003C\u002Ftextarea\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fform\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003E:empty – vorisi bo'lmagan element uchun\u003Cbr\u003E:first-child – o'zining ajdodiga birinchi voris bo'lgan element uchun (barcha elementlar ichidan)\u003Cbr\u003E:first-of-type – o'zining ajdodiga birinchi voris bo'lgan element uchun (faqat joriy selektorlar ichidan)\u003Cbr\u003E:last-child – o'zining ajdodiga oxirgi voris bo'lgan element uchun\u003Cbr\u003E:last-of-type – o'zining ajdodiga oxirgi voris bo'lgan element uchun\u003Cbr\u003E:not(\u003Cselector\u003E) - \u003Cselector\u003E bo'lmagan barcha elementlar uchun\u003Cbr\u003E:nth-child(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun\u003Cbr\u003E:nth-last-child(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun\u003Cbr\u003E:nth-last-of-type(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun\u003Cbr\u003E:nth-of-type(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun\u003Cbr\u003E:only-of-type – o'zining ajdodiga yagona voris element uchun\u003Cbr\u003E:only-child – o'zining ajdodiga yagona voris element uchun\u003Cbr\u003E:target – aktiv #id element uchun\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003Ep:empty {\u003Cbr\u003E width: 100px;\u003Cbr\u003E height: 20px;\u003Cbr\u003E background: #ff0000;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EA paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cspan\u003EAnother\u003C\u002Fspan\u003E paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003Ep {\u003Cbr\u003E color: blue;\u003Cbr\u003E}\u003Cbr\u003E:not(p) {\u003Cbr\u003E color: red;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Ch3\u003EThis is a heading\u003C\u002Fh3\u003E\u003Cbr\u003E\u003Cp\u003EThis is a paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EThis is another paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003EThis is some text in a div element.\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Ca href=\"https:\u002F\u002Fytit.uz\" target=\"_blank\"\u003ELink to YTIT!\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003E p:first-child {\u003Cbr\u003E background: red;\u003Cbr\u003E }\u003Cbr\u003E h4:first-of-type {\u003Cbr\u003E background: green;\u003Cbr\u003E }\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E...\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003EFirst Child\u003C\u002Fp\u003E\u003Cbr\u003E \u003Ch4\u003EFirst of type Child\u003C\u002Fh4\u003E\u003Cbr\u003E \u003Ch4\u003EThird Child\u003C\u002Fh4\u003E\u003Cbr\u003E \u003Cp\u003EFourth Child\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003E p:only-child {\u003Cbr\u003E background: red;\u003Cbr\u003E }\u003Cbr\u003E\r\n span:only-of-type {\u003Cbr\u003E background: yellow;\u003Cbr\u003E }\u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E...\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003EThis is a paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cspan\u003EThis is a span.\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cp\u003EThis is a paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003Enth-qoidalar quyidagi qiymat qabul qilishi mumkin:\u003Cbr\u003Eson\u003Cbr\u003Ekalit so'z (odd, even)\u003Cbr\u003Ean+b ko'rinishidagi ifoda\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EElementlar ierarxiyasiga bog'liq psevdosinflar\u003Cbr\u003E\u003Cp\u003Etr:nth-child(odd) {\u003Cbr\u003E background: #FFBFBF;\r\n}\u003Cbr\u003E\u003Cp\u003Etr:nth-child(n+4):nth-child(odd) {\u003Cbr\u003E background: #FFBFBF;\r\n}\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EPsevdoelementlar\u003Cbr\u003E\u003Cp\u003EPsevdoelementlar – \"virtual\" element yaratish uchun ishlatiladi.\u003Cbr\u003E::before\u003Cbr\u003E::after\u003Cbr\u003E::first-letter\u003Cbr\u003E::first-line\u003Cbr\u003E::selection\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EPsevdoelementlar\u003Cbr\u003E\u003Cp\u003Ep.new::before {\u003Cbr\u003E content: \"!!!\";\u003Cbr\u003E color: blue;\u003Cbr\u003E font: 40px Georgia;\u003Cbr\u003E}\r\np.new::after {\u003Cbr\u003E content: \"\";\u003Cbr\u003E width: 40px;\u003Cbr\u003E height: 20px;\u003Cbr\u003E background-image: url(images\u002Fflag-gb.svg);\u003Cbr\u003E background-size: 40px 20px;\u003Cbr\u003E background-repeat: no-repeat;\u003Cbr\u003E display: inline-block;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cp class=\"new\"\u003EThe Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of \"Huawei Tech Investment Tashkent\" company D. Azizov. \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EThe Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of \"Huawei Tech Investment Tashkent\" company D. Azizov. \u003C\u002Fp\u003E\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EPsevdoelementlar\u003Cbr\u003E\u003Cp\u003Ep::first-letter {\u003Cbr\u003E color: #ff0000;\u003Cbr\u003E font-size: xx-large;\u003Cbr\u003E}\r\np::first-line {\u003Cbr\u003E color: #0000ff;\u003Cbr\u003E font-variant: small-caps;\u003Cbr\u003E}\r\ndiv {\u003Cbr\u003E width: 75%;\u003Cbr\u003E}\u003Cbr\u003E...\u003Cbr\u003E\u003Cp\u003EThe Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of \"Huawei Tech Investment Tashkent\" company D. Azizov. \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv\u003E\u003Cbr\u003E \u003Cp\u003EThe Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of \"Huawei Tech Investment Tashkent\" company D. Azizov. \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EQODIRBEK MAXAROV\u003Cbr\u003E\u003Cp\u003EPsevdoelementlar\u003Cbr\u003E\u002F*::-moz-selection Firefox 62.0 gacha *\u002F\u003Cbr\u003E::selection {\u003Cbr\u003E color: red;\u003Cbr\u003E background: yellow;\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EThe Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of \"Huawei Tech Investment Tashkent\" company D. Azizov. \u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003ESavollar?\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002F4-css-2",href_category:"\u002Fprezentacii-po-informatike",date:1614642903,related:[{id:1157094,name:"SDSM. Sample distribution shadow maps",href:"\u002Fprezentacii-po-informatike\u002Fsdsm-sample-distribution-shadow-maps",jpg:"jpg\u002F1157094"},{id:1118945,name:"Средство отображения информации: принцип действия,виды,назначение",href:"\u002Fprezentacii-po-informatike\u002Fsredstvo-otobrazheniya-informatsii-printsip-deystviyavidynaznachenie",jpg:"jpg\u002F1118945"},{id:1003874,name:"Разработка внутрикорпоративного сайта для БУ Республиканская детская клиническая больница",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-vnutrikorporativnogo-sayta-dlya-bu-respublikanskaya",jpg:"jpg\u002F1003874"},{id:1145988,name:"Общая структура автоматизированной информационно-справочной системы",href:"\u002Fprezentacii-po-informatike\u002Fobshchaya-struktura-avtomatizirovannoy-informatsionno-spravochnoy-sistemy",jpg:"jpg\u002F1145988"},{id:1002860,name:"Информатика и информационно-коммуникационные технологии",href:"\u002Fprezentacii-po-informatike\u002Finformatika-i-informatsionno-kommunikatsionnye-tehnologii-1",jpg:"jpg\u002F1002860"},{id:1183032,name:"Базы Данных Поляков",href:"\u002Fprezentacii-po-informatike\u002Fbazy-dannyh-polyakov",jpg:"jpg\u002F1183032"},{id:1162713,name:"Networks and the effects of using them",href:"\u002Fprezentacii-po-informatike\u002Fnetworks-and-the-effects-of-using",jpg:"jpg\u002F1162713"},{id:1158064,name:"ГИС Независимый регистратор в 2019, 2020 годах и в перспективе",href:"\u002Fprezentacii-po-informatike\u002Fgis-nezavisimyy-registrator-v-2019-2020",jpg:"jpg\u002F1158064"},{id:1169011,name:"Платформа бренда Вконтакте",href:"\u002Fprezentacii-po-informatike\u002Fplatforma-brenda-vkontakte",jpg:"jpg\u002F1169011"},{id:1118255,name:"Прикладное программное обеспечение. 1 занятие",href:"\u002Fprezentacii-po-informatike\u002Fprikladnoe-programmnoe-obespechenie-1-zanyatie",jpg:"jpg\u002F1118255"},{id:1004223,name:"Стрижка собак",href:"\u002Fprezentacii-po-informatike\u002Fstrizhka-sobak-1",jpg:"jpg\u002F1004223"},{id:964927,name:"Разработка информационной базы системы управления деканатов института УиКБ",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-informatsionnoy-bazy-sistemy-upravleniya-dekanatov",jpg:"jpg\u002F964927"},{id:995813,name:"Правила верстки электронных курсов",href:"\u002Fprezentacii-po-informatike\u002Fpravila-verstki-elektronnyh-kursov",jpg:"jpg\u002F995813"},{id:1078053,name:"Разработка веб-сайта для выбора автомобиля по заданным пользователем критериям",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-veb-sayta-dlya-vybora-avtomobilya-1",jpg:"jpg\u002F1078053"},{id:876025,name:"informatio (копия)",href:"\u002Fprezentacii-po-informatike\u002Finformatio-kopiya",jpg:"jpg\u002F876025"},{id:893135,name:"Введение в специальность. История ИКТ, IT и HTML. Лекция 2",href:"\u002Fprezentacii-po-informatike\u002Fvvedenie-v-spetsialnost-istoriya-ikt-it",jpg:"jpg\u002F893135"},{id:1024268,name:"Логические операции",href:"\u002Fprezentacii-po-informatike\u002Flogicheskie-operatsii-17",jpg:"jpg\u002F1024268"},{id:850129,name:"Пресс-портрет",href:"\u002Fprezentacii-po-informatike\u002Fpress-portret",jpg:"jpg\u002F850129"},{id:892098,name:"Потоки и управление ими",href:"\u002Fprezentacii-po-informatike\u002Fpotoki-i-upravlenie-imi",jpg:"jpg\u002F892098"},{id:1025222,name:"Аватврия. Комикс",href:"\u002Fprezentacii-po-informatike\u002Favatvriya-komiks-12-2",jpg:"jpg\u002F1025222"},{id:884312,name:"Системы счисления (нули и единицы)",href:"\u002Fprezentacii-po-informatike\u002Fsistemy-schisleniya-nuli-i-edinitsy",jpg:"jpg\u002F884312"},{id:282540,name:"Презентация на тему Язык Паскаль ",href:"\u002Fprezentacii-po-informatike\u002Fprezentaciya-na-temu-yazyk-paskal",jpg:"jpg\u002F282540"},{id:915501,name:"Создание SQL запросов в MS Access для манипулирования данными",href:"\u002Fprezentacii-po-informatike\u002Fsozdanie-sql-zaprosov-v-ms-access",jpg:"jpg\u002F915501"},{id:930601,name:"Представление информации в форме таблиц",href:"\u002Fprezentacii-po-informatike\u002Fpredstavlenie-informatsii-v-forme-tablits-6",jpg:"jpg\u002F930601"},{id:1151293,name:"Информация и информационные процессы. Ключевые слова",href:"\u002Fprezentacii-po-informatike\u002Finformatsiya-i-informatsionnye-protsessy-klyuchevye-slova-1",jpg:"jpg\u002F1151293"},{id:949708,name:"Методический конструктор для учителей",href:"\u002Fprezentacii-po-informatike\u002Fmetodicheskiy-konstruktor-dlya-uchiteley",jpg:"jpg\u002F949708"},{id:1059778,name:"Пионеры Гродненщины. PROДвижение по материалам педагоговорганизаторов, участников интернет-проекта",href:"\u002Fprezentacii-po-informatike\u002Fpionery-grodnenshchiny-prodvizhenie-po-materialam-pedagogovorganizatorov",jpg:"jpg\u002F1059778"},{id:1167105,name:"Создание и управление рабочей группой проекта",href:"\u002Fprezentacii-po-informatike\u002Fsozdanie-i-upravlenie-rabochey-gruppoy-proekta",jpg:"jpg\u002F1167105"}],navigation:{next:"\u002Fprezentacii-po-fizike\u002Ftrenazher-gazovye-zakony",next_name:"Тренажер. Газовые законы",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fo-canada-our-home-and-native",prev_name:"O Canada! Our home and native land!"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:L,SITE_HOST:"slaidy.com",SITE_LANG:M,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:L,short_name:b,description:b,lang:M,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:T,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","4. CSS 2 ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
input:focus {
color: red;
}
...

QODIRBEK MAXAROV
Element holatini aniqlovchi psevdosinflar
input:disabled {
border: 2px dashed grey;
}
input:invalid {
color: red;
border: 2px solid red;
}
input:valid {
color: green;
border: 2px solid green;
}
:focus:required {
background-color: coral;
color: cornsilk;
}
...
Majburiy maydon

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
:empty – vorisi bo'lmagan element uchun
:first-child – o'zining ajdodiga birinchi voris bo'lgan element uchun (barcha elementlar ichidan)
:first-of-type – o'zining ajdodiga birinchi voris bo'lgan element uchun (faqat joriy selektorlar ichidan)
:last-child – o'zining ajdodiga oxirgi voris bo'lgan element uchun
:last-of-type – o'zining ajdodiga oxirgi voris bo'lgan element uchun
:not(
) -
bo'lmagan barcha elementlar uchun
:nth-child(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun
:nth-last-child(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun
:nth-last-of-type(n) – o'zining ajdodiga voris elementlar oxirgisidan hisoblaganda n-bo'lgan element uchun
:nth-of-type(n) – o'zining ajdodiga voris elementlar birinchisidan hisoblaganda n-bo'lgan element uchun
:only-of-type – o'zining ajdodiga yagona voris element uchun
:only-child – o'zining ajdodiga yagona voris element uchun
:target – aktiv #id element uchun

QODIRBEK MAXAROV
p:empty {
width: 100px;
height: 20px;
background: #ff0000;
}
...
A paragraph.
Another
paragraph.
Elementlar ierarxiyasiga bog'liq psevdosinflar

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
p {
color: blue;
}
:not(p) {
color: red;
}
...
This is a heading
This is a paragraph.
This is another paragraph.
This is some text in a div element.
Link to YTIT!

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
<br> p:first-child {<br> background: red;<br> }<br> h4:first-of-type {<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="QODIRBEK MAXAROV Elementlar ierarxiyasiga bog&#39;liq psevdosinflar p:first-child { background: red; } h4:first-of-type" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/967806/slide-26.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/967806/slide-26.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/967806/slide-26.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-26.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-26.jpg" class="slides-image"><!----><div class="slides-content">background: green;<br> }<br>
...
First Child
First of type Child
Third Child
Fourth Child

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
<br> p:only-child {<br> background: red;<br> }<br>
span:only-of-type {<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="QODIRBEK MAXAROV Elementlar ierarxiyasiga bog&#39;liq psevdosinflar p:only-child { background: red; } span:only-of-type" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/967806/slide-27.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/967806/slide-27.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/967806/slide-27.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-27.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/967806/slide-27.jpg" class="slides-image"><!----><div class="slides-content">background: yellow;<br> }<br>
...
This is a paragraph.
This is a span.
This is a paragraph.

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
nth-qoidalar quyidagi qiymat qabul qilishi mumkin:
son
kalit so'z (odd, even)
an+b ko'rinishidagi ifoda

QODIRBEK MAXAROV
Elementlar ierarxiyasiga bog'liq psevdosinflar
tr:nth-child(odd) {
background: #FFBFBF;
}
tr:nth-child(n+4):nth-child(odd) {
background: #FFBFBF;
}

QODIRBEK MAXAROV
Psevdoelementlar
Psevdoelementlar – "virtual" element yaratish uchun ishlatiladi.
::before
::after
::first-letter
::first-line
::selection

QODIRBEK MAXAROV
Psevdoelementlar
p.new::before {
content: "!!!";
color: blue;
font: 40px Georgia;
}
p.new::after {
content: "";
width: 40px;
height: 20px;
background-image: url(images/flag-gb.svg);
background-size: 40px 20px;
background-repeat: no-repeat;
display: inline-block;
}
...
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.

QODIRBEK MAXAROV
Psevdoelementlar
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
div {
width: 75%;
}
...
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.

QODIRBEK MAXAROV
Psevdoelementlar
/*::-moz-selection Firefox 62.0 gacha */
::selection {
color: red;
background: yellow;
}
The Rector of YTIT Professor J.Kudaybergenov met with the Director for state and public cooperation of "Huawei Tech Investment Tashkent" company D. Azizov.