Добијте више моћи над својим веб дизајном користећи ове напредне ЦСС селекторе.

ЦСС подржава различите селекторе за идентификацију елемената за стилизовање, сваки са сопственим скупом правила. Док је већина метода селекције једноставна, псеудо-класе и псеудо-елементи пружају већу флексибилност. Они вам омогућавају да изаберете елементе на основу њиховог стања или положаја унутар структуре, или бирају одређене делове садржаја.

Ови селектори могу бити тешки за коришћење и лако је мешати псеудо-класе са псеудо-елементима, па како их разликовати?

Разумевање ЦСС псеудокласа

ЦСС псеудо-класа је попут посебне кључне речи коју можете користити са селекторима за стилизовање елемената на различите начине. Ове кључне речи вам помажу да циљате елементе када се догоде одређене ствари, на пример када корисник пређе мишем преко елемента, кликне на њега или унесе нешто у поље за унос.

Псеудо-класе чине вашу веб страницу интерактивнијом и прилагодљивијом тако што мењају како елементи изгледају или се понашају на основу радњи корисника. Када ти

instagram viewer
користите их са другим ЦСС селекторима, пружају прецизну контролу над стилизовањем и интерактивношћу.

Синтакса и употреба ЦСС псеудо-класе

Синтакса за ЦСС псеудо-класу се састоји од двотачка (:) праћено именом псеудо-класе. Ево основне синтаксе:

selector:pseudo-class {
/* styles */
}

У овој синтакси:

  • селектор се односи на елемент или елементе које желите да изаберете и на које примените стилове. То може бити ХТМЛ елемент, класа, ИД или сложенији селектор попут комбинације. Селектор није обавезан, али га обично користите; без тога, ваша псеудо-класа ће циљати све елементе на које може да се примени.
  • псеудокласа је кључна реч која представља одређено стање или стање које желите да циљате.

ЦСС категорише псеудо-класе у неколико група на основу њихове функционалности и услова на које циљају. Ево главних категорија заједно са неким примерима:

Интеракција корисника

:лебдети

Бира елемент када показивач миша пређе преко њега.

:ацтиве

Бира елемент када га корисник активира, обично кликом.

:посетила

Бира везе које је корисник посетио.

Структурални

:прво дете

Бира први подређени елемент надређеног.

:ласт-цхилд

Бира последњи подређени елемент надређеног.

:нтх-цхилд (н)

Бира елементе на основу њихове позиције унутар родитеља, омогућавајући вам да циљате одређену децу.

Форм-Релатед

:дисаблед

Бира онемогућене елементе обрасца.

:цхецкед

Бира означене радио дугмад или поља за потврду.

Стање елемента корисничког интерфејса

:неважећи

Бира неважеће елементе обрасца.

:потребан

Бира потребна поља елемената обрасца.

:опционо

Бира елементе обрасца који су опциона поља.

Везано за везу

:линк

Бира непосећене везе.

Лангуаге-Басед

:ланг()

Бира елементе на основу језика наведеног у њиховом атрибуту „ланг“.

Можете покушати са уобичајеним примером применом ефеката :ховер на слике у галерији. Типични стилови укључују повећање или бледење ових слика када неко пређе преко њих.

Истраживање ЦСС псеудоелемената

ЦСС псеудоелемент је попут посебне кључне речи коју можете користити са селекторима за стилизовање одређених делова садржаја елемента или за уметање додатног садржаја. Ове кључне речи вам омогућавају да циљате и стилизујете елементе на основу њихове структуре садржаја.

Псеудо-елементи побољшајте дизајн и изглед ваше веб странице дајући вам могућност стилизовања елемената на начине који су традиционално били могући само са стварним ХТМЛ елементима.

Синтакса и имплементација ЦСС псеудо-елемента

Псеудоелементи у ЦСС-у имају специфичну синтаксу која укључује коришћење две двотачке (::) након чега следи назив псеудоелемента. Ево основне синтаксе:

selector::pseudo-element {
/* styles */
}

У овој синтакси:

  • селектор циља елемент на који желите да примените псеудоелемент. То може бити било који важећи ЦСС селектор, укључујући ниједан.
  • псеудо-елемент је назив псеудо-елемента који желите да циљате. Можете користити само један псеудо-елемент у селектору јер они немају смисла у комбинацији.

Ево неких од псеудо-елемената:

::пре него што

Умеће садржај испред садржаја изабраног елемента.

::после

Умеће садржај после садржаја изабраног елемента.

::прво слово

Стилизира прво слово текста унутар елемента.

::избор

Стилизује део текста који је корисник одабрао својим курсором.

::маркер

Стилизира оквир маркера ставке листе (нпр. тачка за набрајање или број на листи).

::цуе

Примењује стилове на знакове у медијским елементима као што је

Тхе Псеудо елементи ::пре и ::после може бити посебно тешко разумети, па ће вам њихово вежбање помоћи да савладате остало.

Сличности и разлике

Ево сличности и разлика између ЦСС псеудо-класа и псеудо-елемената:

Псеудо-класе

Псеудо-елементи

Синтакса

Са префиксом са једном двотачком (:).

Са префиксом са две двотачке (::).

Употреба

Изаберите и стилизујте елементе на основу њиховог стања, положаја или интеракције корисника.

Стилизирајте одређене делове садржаја елемента или креирајте виртуелне елементе.

Селектори

Може се појавити у било којој тачки унутар комплексног или сложеног селектора.

Мора бити последња компонента селектора и може се појавити само једном.

Уметање садржаја

Не умеће садржај, првенствено за стилизовање на основу стања.

Може да убацује садржај или виртуелне елементе пре или после садржаја изабраног елемента.

Типограпхиц Стилинг

Обично се не користи за типографски стил.

Користи се за текст и типографски стил (нпр. ::први ред, ::прво слово).

Циљани делови

Циља читаве елементе.

Циља одређене делове садржаја елемента.

Подршка претраживача

Генерално добро подржан.

Генерално добро подржан, али неки старији претраживачи могу имати ограничену подршку.

Псеудо-класе и псеудо-елементи су важни у ЦСС-у за креирање различитих стилова и интерактивних функција. Иако имају неке сличности, сваки од њих има своје јединствене улоге у веб дизајну и развоју.

Псеудо-класе и псеудо-елементи у акцији

Можете да вежбате коришћење ЦСС псеудокласа и псеудоелемената у различитим пројектима да бисте проценили своје разумевање. Примери лаких пројеката које можете да урадите укључују картице профила, меније за навигацију и стил листе, између осталог. Ови пројекти пружају практично искуство за побољшање ваших ЦСС вештина, истовремено уграђујући интерактивност и стил у ваш веб дизајн.