Պսևդոկլասներ և պսևդոէլեմենտներ
Պսևդոէլեմենտներ
Պսևդոէլեմենտներն օգտագործվում են էլեմենտի որոշակի մաս ոճավորելու համար։
Օրինակ՝ ::first-letter – տեքստի առաջին տողի առաջին սիմվոլին սահմանում է ոճ։
Սելեկտորի հետ օգտագործվում է միայն մեկ պսևդոէլեմենտ։ Այն սահմանվում է հիմնական սելեկտորից հետո։
Պսևդոէլեմենտները սահմանվում են երկու «։։»-ով, իսկ պսևդոկլասները՝ մեկ «։»-ով։
Հնարավոր է հանդիպել պսևդոէլեմենտներ մեկ «։» -ով, եթե ոճը CSS2 տարբերակով է։
Պսևդոէլեմենտներն են՝
::after
::after –հիմնական տեքստի վերջում ավելացնում է որևէ մաս։
content հատկությամբ սահմանվում է ավելացվող մասը։
p::after {
content: "Hayti կայքում";
background-color: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Սովորել html</p>
<p>Սովորել css</p>
<p>Սովորել bootstrap</p>
<p>Սովորել sass</p>
</body>
</html>
::before
::before –տեքստի սկզբում ավելացնում է որևէ մաս։
content հատկությամբ սահմանվում է ավելացվող մասը։
p::before {
content: "👍";
background-color: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Սովորել html</p>
<p>Սովորել css</p>
<p>Սովորել bootstrap</p>
<p>Սովորել sass</p>
</body>
</html>
::cue
::cue –ոճավորում է վիդեոյի ենթագիրը(subtitle):
::cue {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<video autoplay controls src="Html-lesson.mp4">
<track default src="html-lessons.vtt" />
</video>
</body>
</html>
Օգտագործվում են հետևյալ հատկությունները՝
background – սահմանում է ենթագրի ֆոնը։
color – սահմանում է ենթագրի տեքստի գույնը։
font – փոխում է ենթագրի տպատառը։
line-height – սահմանում է տողերի միջև եղած հեռավորությունը։
opacity – տեքստին սահմանում է թափանցիկություն։
outline – սահմանում է ենթագրի սահմանագծերի ոճը։
ruby-position – եթե ենթագրերը ասիական սիմվոլներ են, սահմանում է դրանց բացատրության վայրը՝ over-վերևը կամ under-ներքևը։
text-combine-upright – երբ տեքստը պատկերված է ուղղահայաց, ասիական սիմվոլների դեպքում թվերը թեք են։ Հատկությունն օգտագործվում է դրանք հորիզոնական դարձնելու և սիմվոլների սահմաններից չանցնելու համար՝ որպես արժեք սահմանելով «all» -ը: Սահմանվում են նաև «none և digits()» արժեքնրը․ none-ի դեպքում սիմվոլների դիրքը չի փոխվի, իսկ digits()-ը չի աջակցվում բրաուզերների կողմից։
text-decoration – տեքստի ընդգծման համար սահմանում է ոճ։
text-shadow – տեքստին հաղորդում է ստվեր։
visibility – տեքստը դառնում է անտեսանելի, բայց դրա տարածքը չի կորչում։ Ունի երեք արժեք՝ «visible, hidden, collapse»։ Առաջինի դեպքում տեքստը կհայտնվի, երկրորդն այն կդարձնի անտեսանելի, բայց հատկացված տարածքը կմնա նույնը՝ կարծես տեքստն իր վայրում է։ collapse -ը նախատեսված է աղյուսակի(table) համար։
white-space – սահմանում է՝ ինչպես էլեմենտում առկա պրոբելները մշակվեն։
::first-letter
::first-letter – Տեքստի առաջին տողի առաջին սիմվոլին սահմանում է ոճ։
p::first-letter {
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Html-ի օգնությամբ հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, սակայն
գեղեցիկ ձևավորված փաստաթուղթ։
</p>
</body>
</html>
::first-line
::first-line – Տեքստի միայն առաջին տողին սահմանում է ոճ։
p::first-line {
color: red;
}
::selection
::selection – սահմանում է ոճ տեքստում օգտվողի կողմից ընտրված հատվածի համար։
Սրա համար կօգտագործվեն Css-ի հետևյալ հատկությունները՝ color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow։
p::selection {
color: white;
background: orange;
}
::backdrop
::backdrop – վեբ էջում վերին շերտի էլեմենտի ոճավորման համար է․ օրինակ՝ fullscreeen` երբ վիդեոն բացվում է լիաէկրան ռեժիմով, կամ որևէ մոդալ պատուհան և այլն։
video::backdrop {
background-color: red;
}
::placeholder
::placeholder – <input> -ին սահմանում է ոճ։
input::placeholder {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" placeholder="Մուտքագրեք տեքստը․․․" />
</body>
</html>
::marker
::marker –օգտագործվում է ցուցակի մարկերները ոճավորելու համար։
li::marker {
color: red;
}
::text-target
::text-target – երբ օգտվողը մուտք է գործում էջ, պսևդոէլեմենտը ոճավորում և բրաուզերի կողմից տեղափոխում է վեբ էջում որևէ հատվածի վրա։
Սահմանվում է հետևյալ կերպ՝ նշվում է « # »-ը, դրան հետևում է « :~:text= » մասը, որից հետո տեղադրվում է տեքտսի այն հատվածը, որի վրա ավտոմատ պետք է տեղափոխվի։ Օրինակ՝
https://www.lipsum.com/#:~:text=section%201.10.32%20of%20%22de%20finibus%20bonorum%20et%20malorum%22%2C%20written%20by%20cicero%20in%2045%20bc
Այս տեսակի հղումներ պատրաստելու համար կան բրաուզերին կցվող պլագիններ, որոնցով հեշտությամբ կկատարվի։ Օրինակ՝ « Link to Text Fragment » պլագինը, որը նախատեսված է Chrome-ի համար։
Պլագինի հասցեն է՝
https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg
Օգտագործելու կարգն հետևյալն է՝
-նախ անհրաժեշտ է պլագինը տեղադրել բրաուզերի մեջ(անցնել վերը նշված հասցեով և սեղմել « install կամ установить » կոճակը):
Հղումը պատրաստելու կարգը հետևյալն է՝
Այսպիսով ::target-text -ի միջոցով կոճավորվի վեբ էջում տվյալ հատվածը։
Առաջին վեբ էջում՝
html {
width: 620px;
background-color: grey;
}
<body>
<img decoding="async" src="forest-2.jpg" style="width: 600px" />
<div>
Lorem ipsum dolor sit amet,
<a
href="http://mysite.am:8080/example2.html#:~:text=vivamus%20non%20ipsum%20
eleifend%2C%20porttitor%20nisi%20ac%2C%20luctus"
>consectetur</a
>
adipiscing elit. Aliquam nec…… urna gravida pellentesque.
</div>
</body>
Երկրորդ վեբ էջում`
body {
width: 620px;
background-color: rgb(104, 70, 70);
}
::target-text {
color: orange;
background-color: black;
}
<body>
<img decoding="async" src="forest.jpg" style="width: 600px" />
<div>
Lorem ipsum dolor sit amet ……Nulla facilisi. Vivamus non ipsum eleifend,
porttitor nisi ac, luctus elit. ………sem a urna gravida pellentesque.
</div>
</body>
Պսևդոկլասներ
Պսևդոկլասների միջոցով էլեմենտները դառնում են ավելի դինամիկ էջի վրա օգտվողի հետ փոխազդեցության դեպքում։
Պսևդոկլասները սահմանվում են մեկ « ։ »-ով։
Ի տարբերություն պսևդոէլեմենտների, պսևդոկլասները կարող են էլեմենտը ոճավորել՝ հիմք վերցնելով վերջինիս վիճակը։ Օրինակ՝ :disabled –ոճավորում է բոլոր անհասանելի էլեմենտները(որոնցում սահմանվացծ է disabled ատրիբուտը)։
Պսևդոկլասներն են՝
:link :visited :hover :active
:link :visited :hover :active –սովորաբար օգտագործվում են <a> էլեմենտի հետ։ ” :link ” -ը սահմանում է ոճ չայցելած հասցեների համար, ” :visited ” -ը՝ այցելած հասցեների համար, ” :hover ” -ը՝ երբ մկնիկի սլաքը հասցեի վրա է, ” :active ” -ը՝ հասցեին սեղմելու պահին։
a:link {
color: blue;
}
a:visited {
color: grow;
}
a:hover {
color: white;
background: orange;
}
a:active {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="html-less.html">html css դասընթաց</a>
<a href="#">bootstrap դասընթաց</a>
<a href="#">Javascript դասընթաց</a>
</body>
</html>
:is() :matches() :any()
:is() :matches() :any() – :is()-ը փոխարինման է եկել :matches()-ին, իսկ վերջինս՝ :any()-ին։
:is()-ը ստուգում է՝ արդյոք էլեմենտը հանդիսանում է դուստր ։is(…) -ում թվարկածների համար։
Օրինակ անրաժեշտ է՝ միայն ” article, section և aside ” էլեմենտների դուստր ” h1 ” էլեմենտները դառնան կարմիր։ Այն հնարավոր է սահմանել երկու տարբերակով՝
article h1, section h1, aside h1 { color: red; }
:is() -ի միջոցով այն կսահմանվի ավելի հակիրճ՝
:is(article, section, aside) h1 {
color: red;
}
Եթե անհրաժեշտ է բոլոր տեսակի վերնագրերը սահմանել կարմիր, ապա՝
article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
color: red;
}
կամ այն սահմանել :is() -ի միջոցով՝
:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
color: red;
}
Նշանակում է հետևյալը – եթե էլեմենտը հանդիսանում է դուստր ” article, section և aside ” -ի համար և եթե այն ” h1, h2, h3, h4, h5 և h6 ” տեսակի է, ապա ոճավորել։
Կա :is() պսևդոկլասի հակառակ գործողություն կատարողը՝ :not()-ը։ Այն թույլ է տալիս, օրինակ ոճն օգտագործել բոլոր վերնագրերի համար, որոնք չեն հանդիսանում դուստր :not(…) -ում թվարկվածների համար՝
:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
color: red;
}
:where()
:where() – համապատասխանում է :is() պսևդոկլասին։
Ունի մեկ տարբերություն՝ :is() -ում նշված “սելեկտոր կլասները“ առաջնահերթություն կունենան :is()-ից դուրս գտնվող “սելեկտոր էլեմենտներից“։ :where()-ի դեպքում հակառակը՝ “սելեկտոր էլեմենտները“ առաջնահերթություն կունենան :where() -ում նշված “սելեկտոր կլասներից“։
html {
font-family: sans-serif;
font-size: 150%;
}
:is(section.is-styling, aside.is-styling, footer.is-styling) a {
color: red;
}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {
color: orange;
}
footer a {
color: blue;
}
<body>
<article>
<h2>:is()-styled links</h2>
<section class="is-styling">
<p>
Here is my main content. This
<a href="https://mozilla.org">contains a link</a>.
</p>
</section>
<aside class="is-styling">
<p>
Here is my aside content. This
<a href="https://developer.mozilla.org">also contains a link</a>.
</p>
</aside>
<footer class="is-styling">
<p>
This is my footer, also containing
<a href="https://github.com/mdn">a link</a>.
</p>
</footer>
</article>
<article>
<h2>:where()-styled links</h2>
<section class="where-styling">
<p>
Here is my main content. This
<a href="https://mozilla.org">contains a link</a>.
</p>
</section>
<aside class="where-styling">
<p>
Here is my aside content. This
<a href="https://developer.mozilla.org">also contains a link</a>.
</p>
</aside>
<footer class="where-styling">
<p>
This is my footer, also containing
<a href="https://github.com/mdn">a link</a>.
</p>
</footer>
</article>
</body>
Հետևյալ օրինակում ‘footer a’ սելեկտոր-էլեմենտն առաջնահերթություն ունի :where()-ում նշված ‘footer.where-styling’ սելեկտոր-կլասից։
‘footer.is-styling’ սելեկտոր-կլասը :is()-ում ավելի առաջնահերթ է ‘footer a’ սելեկտոր-էլեմենտից։
Ուստի առաջին օրինակում(:is()-ի դեպքում) վերջին հղման գույնը չի փոխվել կապույտի, իսկ երկրորդում(:where()-ի դեպքում)՝ փոխվել է։
:is() :where() պսևդոկլասներն ունեն մեկ այլ առավելություն։
Հետևյալ օրինակում, եթե որևէ բրաուզեր չաջակցի օրինակ :unsupported-ը, այն կանտեսվի, բայց :valid-ը չի կորցնի իր ազդեցությունը։
:where(:valid, :unsupported) {
...
}
Առանց :is(), :where() պսևդոկլասների, եթե որևէ բրաուզեր չաջակցի օրինակ :unsupported-ը, ապա բոլոր թվարկվածները կկորցնեն իրենց ազդեցությունը։
:valid, :unsupported {
...
}
:any-link
:any-link – նախատեսված է հղումների համար(<a>, <area>, <link>), որոնք ունեն href ատրիբուտը։
:any-link -ը կոճավորի վեբ էջի բոլոր հղումները՝ առանց հաշվի առնելու այցելվածները։
a:any-link {
color: orange;
}
:checked
:checked – ոճավորում է բոլոր ընտրված radio, checkbox և option էլեմենտները(օրինակ՝ <input type= “radio” >)։
input:checked + span {
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" name="a1" /><span>html</span><br />
<input type="checkbox" name="a2" /><span>css</span><br />
<input type="checkbox" name="a3" /><span>bootstrap</span><br />
<input type="checkbox" name="a4" /><span>javascript</span><br />
</body>
</html>
:default
:default – ոճավորում է կանխադրված(по умолчанию) էլեմենտները:
Օգտագործվում է <button>, <input type=”checkbox”>, <input type= “radio”> և <option> էլեմենտների հետ։
input:default + span {
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" name="a1" /><span>html</span><br />
<input type="checkbox" name="a2" checked /><span>css</span><br />
<input type="checkbox" name="a3" /><span>bootstrap</span><br />
<input type="checkbox" name="a4" /><span>javascript</span><br />
</body>
</html>
:defined
:defined – ոճավորում է վեբ էջի բոլոր էլեմենտները(‘custom-element’ -երը նույնպես – html էլեմենտներ, որոնք պատրաստված են մեր կողմից Javascript -ի միջոցով)։
:defined {
background: red;
font-style: italic;
}
.div01 {
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
<div class="div01"></div>
</body>
</html>
Այստեղ <body>, <p> և <div> էլեմենտների ֆոնը սահմանված է կարմիր, իսկ տեքստը՝ italic ոճով։
:dir()
:dir() – ոճավորում է dir ատրիբուտն օգտագործած էլեմենտները։
Ընդունում է երեք արժեք՝
rtl– կոճավորվի, եթե տեքստի գրելաձևը աջակողմյան է։
ltr – կոճավորվի, եթե տեքստի գրելաձևը ձախակողմյան է։
auto – ոճավորում է նրանք, որոնց տեքստի ուղղությունը որոշում է բրաուզերը՝ըստ օգտագործած լեզվի։
Աջակցվում է միայն Firefox բրաուզերի կողմից։
div:dir(ltr) {
background-color: orange;
}
div:dir(rtl) {
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div dir="rtl">
<span>Օրինակ-1</span>
<div dir="ltr">Օրինակ-2</div>
<div dir="auto">ففي</div>
</div>
</body>
</html>
:disabled
:disabled – ոճավորում է այն էլեմենտները, որոնք ունեն disabled ատրիբուտը։
input:disabled {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text">Անուն</input><br>
<input type="text">Ազգանուն</input><br>
<input type="text" disabled>Հասցե</input><br>
</body>
</html>
:empty
:empty – ոճավորում է դատարկ էլեմենտները։
:empty {
background-color: red;
}
td {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table border="1">
<tr>
<td>Արկղ-1</td>
<td>Արկղ-2</td>
<td></td>
</tr>
<tr>
<td>Արկղ-4</td>
<td></td>
<td>Արկղ-6</td>
</tr>
</table>
</body>
</html>
:enabled
:enabled – ոճավորում է հասանելի էլեմենտները, որոնց հնարավոր է ակտիվացնել՝ ընտրել, որևէ տեքստ գրել և այլն։
input:enabled {
background: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text">Անուն</input><br>
<input type="text">Ազգանուն</input><br>
<input type="text" disabled>Հասցե</input><br>
</body>
</html>
:first :left :right
:first :left :right – Տես ՛@Կանոններ՛ բաժնում։ Օգտագործվում է միայն @page կանոնի հետ։
:first-child
:first-child – նախատեսված է ծնող էլեմենտների առաջին դուստր էլեմենտի համար, որը համապատասխանում է պսևդոկլասից առաջ նշվածին, այս դեպքում p -ին։
p:first-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Այս տեքստին ոճ կսահմանվի, քանի որ div-ի մեջ հանդիսանում է առաջինը։</p>
<p>Այս տեքստին ոճ չի սահմանվի։</p>
</div>
<div>
<h2>Այս տեքստին ոճ չի սահմանվի։ Այն չի հանդիսանում p էլեմենտ։</h2>
<p>
Այս տեքստին ոճ չի սահմանվի, քանի որ div-ի մեջ չի հանդիսանում առաջինը։
</p>
</div>
</body>
</html>
:first-of-type
:first-of-type – Օրինակ ծնող էլեմենտում կան 3 տեսակի էլեմենտներ և ամեն մեկից՝ երկուական։ Պսևդոկլասը ոճ կսահմանի յուրաքանչյուր տեսակի առաջինը նշված էլեմենտներին։
Սելեկտորը պսևդոկլասից պետք է առանձնացվի պրոբելով(կնշանակի, որ այդտեղ սահմանված է ունիվերսալ սելեկտորը՝ « * » -ը), հակառակ դեպքում արդյունքն այլ կլինի։
article :first-of-type { /* նույնն է ինչ՝ article *:first-of-type */
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<h1>Թմբկաբերդի առումը</h1>
<p>Հեղինակ՝ Հովհաննես Թումանյան</p>
<p>Էլեկտրոնային գիրքն ուղարկել՝</p>
<address>Էլ․ հասցե՝ hayti@gmail.com</address>
<p>
Գիրքը գրվել է <time datetime="1902-10-16">1902 թվականին,</time> իսկ
հրատարակվել է <time datetime="1905-11-20"> 1905 թվականին։ </time>
</p>
</article>
</body>
</html>
:fullscreen
:fullscreen – Javascript-ի միջոցով էլեմենտը հնարավոր է ցուցադրել լիաէկրան ռեժիմով, իսկ պսևդոկլասի միջոցով ոճավորվում է լիաէկրան ռեժիմով ցուցադրվողը։
function fullScreen() {
var el = document.getElementById("msg"); // ստանում ենք էլեմենտը
if (el.webkitRequestFullscreen)
el.webkitRequestFullscreen(); // Chrome, Opera, Safari – ի համար
else if (el.mozRequestFullScreen)
el.mozRequestFullScreen(); // Firefox-ի համար
else if (el.msRequestFullscreen)
el.msRequestFullscreen(); // Internet Explorer, Edge – ի համար
else if (el.requestFullscreen) el.requestFullscreen(); // Ստանդարտ
}
body {
margin: 0;
}
#msg {
padding: 10px;
background: #bc7062;
color: #fff;
}
#msg:-ms-fullscreen {
background: #6088a5;
}
#msg:-webkit-full-screen {
background: #6088a5;
}
#msg:-moz-full-screen {
background: #6088a5;
}
/* ms(Internet Explorer, Edge), webkit(Chrome, Opera, Safari), moz(Firefox)-ի միջոցով նշում ենք բրաուզերներների տեսակները։ */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="my-script.js"></script>
<div id="msg">
Այս հատվածն է միայն ցուցադրվելու լիաէկրան ռեժիմում։ Տվյալ div-ն իր գույնը
կփոխի նշվածով։
</div>
<p>
Սա օրինակի համար՝ տեսնելու որ վերջինս չի ցուցադրվելու լիաէկրան ռեժիմում։
</p>
<p><button onclick="fullScreen()">Նայել լիաէկրան ռեժիմում։</button></p>
</body>
</html>
:focus
:focus – նախատեսված է, երբ էլեմենտը ստանում է ֆոկուս, օրինակ՝ «<input>»-ը (input-ի դաշտին սեղմելիս, այն ակտիվանում է, այսինքն ստանում է ֆոկուս)։
.red-input:focus {
color: red;
}
.green-input:focus {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input class="red-input" value="ստանալով ֆոկուս՝ կկարմրի" />
<input class="green-input" value="ստանալով ֆոկուս՝ կկանաչի" />
</body>
</html>
:indeterminate
:indeterminate – նախատեսված է փոխարկիչների համար(checkbox, radio), երբ դրանք գտնվում են ոչ ակտիվ վիճակում։
Checkbox-ի դեպքում անհրաժեշտ է ավելացնել Javascript կոդ։
Այս պսևդոկլասն օգտագործվում է նաև <progress> էլեմենտի հետ։
Օրինակ՝
input:indeterminate + label {
background: lime;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<form>
<input type="checkbox" id="checkbox" />
<label for="checkbox">Эта метка будет зелёной.</label>
<script>
var checkbox = document.getElementById("checkbox");
checkbox.indeterminate = true;
</script>
</form>
</div>
<div>
<form>
<input type="radio" id="radio" name="option" />
<label for="radio">Эта метка будет зелёной.</label>
<input type="radio" id="radioo" name="option" />
<label for="radioo">Эта метка будет зелёной.</label>
</form>
</div>
<progress></progress>
</body>
</html>
:in-range :out-of-range
:in-range :out-of-range – նախատեսված է <input> էլեմենտի որոշակի տեսակների համար՝ number, range, date, datetime, datetime-local, month, time և week։
Օրինակ number-ը, որը թվերի համար նախատեսված դաշտ է, որտեղ սահմանվում է թվերի սահմանափակման դիապազոնը։ Եթե թիվը դիապազոնի մեջ է՝ կակտիվանա :in-range -ը, իսկ եթե դիապազոնից դուրս է՝ կակտիվանա :out-of-range-ը։
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: " ընդունելի է";
}
input:out-of-range + label::after {
content: "դիապազոնից դուրս է";
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="" id="form1">
<ul>
Նշել թիվ 1-ից մինչև 10-ը։
<li>
<input
id="value1"
name="value1"
type="number"
placeholder="1 -
10"
min="1"
max="10"
value="12"
/>
<label for="value1">Ձեր նշած թիվը - </label>
</li>
</ul>
</form>
</body>
</html>
:invalid :valid :required
:invalid :valid :required – նախատեսված են <input> և <form> էլեմենտների դաշտերի պարունակության անվավեր՝ :invalid և վավեր՝ :valid վիճակների համար։
:required -ը նախատեսված է required ատրիբուտ ունեցող էլեմենտների համար։
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<label>Նշեք URL հասցեն:</label>
<input type="url" />
<label>Նշեք էլ․ հասցեն։</label>
<input type="email" required />
</form>
</body>
</html>
:lang()
:lang() – էլեմենտներն ընտրում է ՝ հիմնվելով լեզվի վրա, որը սահմանված է էլեմենտի lang ատրիբուտում։
.class1:lang(hy) {
color: red;
}
.class1:lang(ru) {
color: blue;
}
.class1:lang(en) {
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="class1" lang="hy">Բարև երկիր!!</p>
<p class="class1" lang="ru">Привет мир!!</p>
<p class="class1" lang="en">Hellow World!!</p>
<p></p>
</body>
</html>
:last-child
:last-child –նախատեսված է ծնող էլեմենտում վերջին դուստր էլեմենտի համար։
Սելեկտորը պսևդոկլասից պետք է առանձնացվի պրոբելով՝ հակառակ դեպքում արդյունքն այլ կլինի։
div :last-child {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Hellow World!!</p>
<p>Hellow World!!</p>
<p>Hellow World!!</p>
</div>
</body>
</html>
:last-of-type
:last-of-type – էլեմենտում կան 3 տեսակի դուստր էլեմենտներ և ամեն մեկից՝ երկուական։ Նախատեսված է իր տեսակի մեջ վերջինը նշված դուստր էլեմենտների համար։
Սելեկտորը պսևդոկլասից պետք է առանձնացվի պրոբելով, որը կնշանակի՝ այդտեղ սահմանված է ունիվերսալ սելեկտորը՝ « * » -ը, հակառակ դեպքում արդյունքն այլ կլինի։
article *:last-of-type { /* սա նույնն է ինչ՝ article :last-of-type */
color: red;
font-style: italic;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<div>div տեսակի մեջ առաջինն է։</div>
<div><span>Տվյալ span`-ը հանդիսանում է վերջինն իր տեսակի մեջ։</span></div>
<div>
<em> em տեսակի մեջ առաջինն է</em>, իսկ սա՝
<em>վերջինը։</em>
</div>
<b> b տեսակի մեջ վերջինն է։</b>
<div>div տեսակի մեջ վերջինն է։</div>
</article>
</body>
</html>
:not()
:not() – Բացառում է նրանք, որոնք նշված են փակագծերում, իսկ մնացածին կոճավորի։
Փակագծերում կարելի է նշել պսևդոկլասներ, սելեկտոր էլեմենտներ, իդենտիֆիկատորներ, կլասներ և սելեկտոր-ատրիբուտներ։
Արգելվում է նշել պսևդոէլեմենտներ և օգտագործել ինքն իրենում( :not(:not(…)) )։
input:not([type="submit"]) {
border: 1px solid orange;
padding: 3px;
}
p:not(.class01) {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="handler.php">
<p class="class01">Ձեր անունը: <input name="user" /></p>
<p>Ընտրեք ֆայլը: <input type="file" name="file" /></p>
<p><input type="submit" value="Ուղարկել" /></p>
</form>
</body>
</html>
:nth-child() :nth-last-child()
:nth-child() :nth-last-child() – :nth-child() -ը նախատեսված է էլեմենտները ոճավորելու ըստ դրանց համարակալման` աճման կարգով, իսկ :nth-last-child() -ը հակառակը՝ նվազման կարգով։
Որպես հատկություն ընդունում է հետևյալը՝
odd – մայր էլեմենտում գտնվող բոլոր դուստր կենտ էլեմենտները։
even – մայր էլեմենտում գտնվող բոլոր դուստր զույգ էլեմենտները։
թիվ – դուստր էլեմենտների հաջորդական համարները մայր էլեմենտում ըստ ՛ an±b ՛ բանաձևի։
Համարակալումը սկսում է 1-ից, որը մայր էլեմենտում առաջին դուստրն է։
Պսևդոկլասում էլեմենտները որոշվում է an±b` (a*n +(-) b ) բանաձևով, որտեղ a-ն ու b-ն ամբողջական թվեր են, իսկ n-ը հաշվիչ է և սկսվում է 0-ից։
Եթե a-ն հավասար է 0-ի, այն չի նշվի և կկրճատվի մինչև b-ն․ օրինակ՝ « 0n+5 », կամ՝ 5։
Եթե b-ն հավասար է 0-ի, այն չի նշվի և կրկին կկրճատվի․ օրինակ՝ « 4n+0 », կամ՝ 4n:
a-ն և b-ն կարող են լինել նաև բացասական թվեր, որոնց նշանակությունը կտեսնենք քիչ անց։
Այսպիսով՝
| Արժեքը | Թվերի հաջորդականությունը | Նկարագրությունը |
|---|---|---|
|
1 |
1 |
Առաջին էլեմենտը․ նույնն է ինչ՝ :first-child – ը։ |
|
5 |
5 |
Հինգերորդ էլեմենտը։ |
|
2n |
2,4,6,8,10…. 1.n=0; 2×0 = 0; 2.n=1; 2×1 = 2; 3.n=2; 2×2 = 4; ….. |
Բոլոր զույգ էլեմենտները․ նույնն է ինչ՝ even-ը։ |
|
2n+1 |
1,3,5,7,9….. 1. n=0; 2×0 + 1= 1; 2. n=1; 2×1 +1 = 3; 3. n=2; 2×2 + 1= 5; ……. |
Բոլոր կենտ էլեմենտները․ նույնն է ինչ՝ odd-ը։ |
|
3n |
3,6,9,12,15….. 1. n=0; 3×0 = 0; 2. n=1; 3×1 = 3; 3. n=2; 3×2 = 6;…… |
Ամեն երրորդ էլեմենտը |
|
3n+2 |
2,5,8,11,14….. 1. n=0; 3×0 + 2= 2; 2. n=1; 3×1 + 2= 5; 3. n=2; 3×2 + 2= 8;…….. |
Ամեն երրորդ էլեմենտը, սկսած երկրորդից։ |
|
n + 4 |
4,5,6,7,8….. 1. n=0; 0 + 4 = 4; 2. n=1; 1 + 4= 5; 3. n=2; 2 + 4= 6; |
Բոլոր էլեմենտները, բացի առաջին երեքից։ |
|
-n+3 |
3,2,1 1. n=0; 0 + 3 = 3; 2. n=-1; -1 + 3 = 2; 3. n=-2; -2 + 3= 1; |
Առաջին երեք էլեմենտները։ |
|
5n-2 |
3,8,13,18,23 1. n=0; 5×0 – 2 = -2; 2. n=1; 5×1 – 2= 3; 3. n=2; 5×2 – 2= 8…… |
Ամեն հինգերորդ էլեմենտը՝ սկսած 3-ից։
|
|
even |
2,4,6,8,10….. |
Բոլոր զույգ էլեմենտները։ |
|
odd |
1,3,5,7,9….. |
Բոլոր կենտ էլեմենտները։ |
|
:nth-child(n+8):nth-child(-n+14) |
:nth-child(n+8) = 8,9…14,15… :nth-child(-n+14) = 1-14 1-14 և 8-15… = 8-14 |
8-ից մինչև 14 էլեմենտները։ |
table {
width: 100%;
border-spacing: 0;
}
tr :nth-child(2n) {
background: #f0f0f0;
}
tr :nth-child(1) {
background: #567;
color: #fff;
}
tr :nth-child(n + 3):nth-child(-n + 6):nth-child(odd) {
background: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nth-child</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>ONE</td>
<td>TWO</td>
<td>THREE</td>
<td>FOUR</td>
<td>FIVE</td>
</tr>
<tr>
<td>First Numbers</td>
<td>16</td>
<td>34</td>
<td>62</td>
<td>74</td>
<td>57</td>
</tr>
<tr>
<td>Second Numbers</td>
<td>4</td>
<td>69</td>
<td>72</td>
<td>56</td>
<td>47</td>
</tr>
<tr>
<td>Third Numbers</td>
<td>7</td>
<td>73</td>
<td>79</td>
<td>34</td>
<td>86</td>
</tr>
<tr>
<td>Fourth Numbers</td>
<td>23</td>
<td>34</td>
<td>88</td>
<td>53</td>
<td>103</td>
</tr>
</table>
</body>
</html>
:nth-of-type() :nth-last-of-type()
:nth-of-type() :nth-last-of-type() – :nth-of-type -ը նույնն է ինչ :nth-child-ը։ Ունի մեկ տարբերություն՝ :nth-child -ով ծնող էլեմենտում դուստրերի համարակալումը կատարվում է հերթականությամբ՝ առանց հաշվի առնելու էլեմենտի տեսակը, իսկ :nth-of-type -ը սահմանվում է հենց էլեմենտին։
:nth-last-of-type() -ը էլեմենտները ոճավորում է վերջից՝ նվազման կարգով։
p:nth-of-type(even) {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<div>Այս էլեմենտը հաշվի չի առնվի։</div>
<p>Այս էլեմենտը նույնպես հաշվի չի առնվի - 1-ին պարագրաֆ։</p>
<p>Այս էլեմենտը հաշվի կառնվի - 2-րդ պարագրաֆ։</p>
<span>Այս էլեմենտը նույնպես հաշվի չի առնվի։</span>
<p>Այս էլեմենտը նույնպես հաշվի չի առնվի - 3-րդ պարագրաֆ։</p>
<p>Այս էլեմենտը հաշվի կառնվի - 4-րդ պարագրաֆ։</p>
</div>
</body>
</html>
:only-child
:only-child – ոճավորում է էլեմենտը եթե այն միակն է իր ծնողի մեջ։
p:only-child {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>
Այս դուստր էլեմենտը հաշվի կառնվի, քանի որ միակն է իր ծնող էլեմենտի մեջ:
</p>
</div>
</body>
</html>
:only-of-type
:only-of-type –ոճավորում է միայն այն դուստր էլեմենտներին, որոնք ծնողի մեջ միակն են իրենց տեսակով։
main :only-of-type {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div>Առաջին div-ը։</div>
<p>Առաջին p-ն, որը միակն է իր տեսակի մեջ։</p>
<div>Երկրորդ div-ը</div>
<div>
Երրորդ div-ը։
<i>Առաջին i-ն, որը միակն է իր տեսակի մեջ։</i>
<em>Առաջին em-ը։</em>
<em>Երկրորդ em-ը։</em>
</div>
</main>
</body>
</html>
:optional
:optional – նախատեսված է <input> -ների համար, որոնք չունեն required ատրիբուտը։ Այսպիսով կոճավորվեն միայն այն <input>-ները, որոնք լրացման համար պարտադիր չեն։
input:optional {
background-color: lime;
}
input:required {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="handler.php">
<p>Նշեք ձեր անունն ու տարիքը</p>
<p>Անունը։ <input name="name" required /></p>
<p>Տարիքը։ <input type="number" min="18" name="տարեկան" /></p>
</form>
</body>
</html>
:read-only :read-write
:read-only :read-write –:read-only -ն նախատեսված է <form>-ի դաշտերի համար, որոնք ունեն readonly ատրիբուտը՝ որոնք լրացման կամ փոփոխման ենթակա չեն։
:read-write -ը նախատեսված է դաշտերի համար, որոնք ակտիվ են լրացման կամ փոփոխման համար։
input:read-only {
color: red;
}
input:read-write {
border: lime;
color: lime;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:read-only</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<p>
<input
type="text"
name="comment"
size="40"
value="Այս դաշտը չի
կարող լրացվել։"
readonly
/>
</p>
<p>
<input
type="text"
name="comment01"
size="40"
value="Այս դաշտը
կարող է լրացվել։"
/>
</p>
</form>
</body>
</html>
:root
:root – նախատեսված է գլխավոր էլեմենտի՝ <html>-ի համար։
:root պսևդոկլասը և html սելեկտորը համարժեք են։ Երկուսի առկայության դեպքում :root-ն ավելի առաջնահերթ է html սելեկտորից։
:root {
background-color: orange;
}
html {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
Անունը: <input type="text" value="Ձեր անունը" /><br /><br />
Ազգանունը: <input type="text" value="Ձեր ազգանունը" /><br /><br />
</form>
</body>
</html>
:scope
:scope – հիմնականում նախատեվսած է Javascript-ի համար, որտեղ այն կվերաբերի առանձնացված էլեմենտին։
Css -ում այն կաշխատի <style> էլեմենտի scoped ատրիբուտի հետ մեկտեղ։
Եթե :scope պսևդոկլասն օգտագործվի հիմնական <style> էլեմենտում(որը սահմանվում է <head> -ում), ապա այն համարժեք է :root պսևդոկլասին։
p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<section>
<h1>էլեմենտը չի ոճավորվի։</h1>
<p>էլեմենտը չի ոճավորվի։</p>
</section>
<section>
<style scoped>
:scope {
font-style: italic;
}
</style>
<h1>էլեմենտը կոճավորվի։</h1>
<p>էլեմենտը կոճավորվի։</p>
</section>
</article>
</body>
</html>
:target
:target – կոճավորի վեբ էջի բոլոր խարիսխները(ՏԵս՝ ” a… էլեմենտներ ” -ի ” <a> ” բաժնի ” id-href ” մասում)։
div:target {
background: orange;
padding: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
<li><a href="#div01">Առաջին մաս</a></li>
<li><a href="#div02">Երկրորդ մաս</a></li>
</ul>
<div id="div01">
<h2>Առաջին մաս</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum
egestas hendrerit. Etiam id nisi lectus. Maecenas vitae pharetra nibh
</p>
</div>
<div id="div02">
<h2>Երկրորդ մաս</h2>
<p>
Aliquam ac tempus elit, ut fringilla tellus. Curabitur egestas pulvinar
magna ac dictum. Nullam vel nisl libero.
</p>
</div>
</body>
</html>
Պսևդոէլեմենտների ու պսևդոկլասների, ինչպես նաև css-ի հատկությունների վրա հնարավոր է հանդիպել -moz-, -ms-, -webkit-, -o- նախածանցներին(префикс): Ներկայումս բրաուզերներն աջակցում են բոլոր հասանելի հատկությունները, բայց նոր կամ փորձնական հատկությունների համար ցանկալի է դրանք օգտագործել(կարելի է ստուգել https://caniuse.com/ կայքով)։
« -moz- » -նախատեսված է միայն Firefox բրաուզերի համար։
« -ms- » -նախատեսված է internet explorer և Edge- բրաուզերների համար։
« -webkit- » -նախատեսված է Chrome և Safari բրաուզերների համար։
« -o- » -նախատեսված է Opera բրաուզերի համար։
Որոշ դեպքերում պարտադիր է օգտագործել նախածանցները, որպեսզի տվյալ բրաուզերը ճանաչի սահմանված հատկությունը։
Օրինակներ՝
/* Standard CSS */
.example {
/* Standard CSS properties */
background: linear-gradient(to right, #ff7e5f, #feb47b);
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
/* Vendor Prefixes */
.example {
/* Mozilla Firefox */
background: -moz-linear-gradient(to right, #ff7e5f, #feb47b);
/* Webkit (Chrome, Safari) */
background: -webkit-linear-gradient(to right, #ff7e5f, #feb47b);
/* Opera */
background: -o-linear-gradient(to right, #ff7e5f, #feb47b);
/* Internet Explorer */
background: -ms-linear-gradient(to right, #ff7e5f, #feb47b);
}
/* Full range of browser support for certain properties */
.example {
/* Standard property */
display: flex;
/* Mozilla Firefox */
display: -moz-flex;
/* Webkit (Chrome, Safari) */
display: -webkit-flex;
/* Opera */
display: -o-flex;
/* Internet Explorer */
display: -ms-flexbox;
}
/* Example of a transition property with prefixes */
.example {
/* Standard property */
transition: all 0.3s ease-in-out;
/* Mozilla Firefox */
-moz-transition: all 0.3s ease-in-out;
/* Webkit (Chrome, Safari) */
-webkit-transition: all 0.3s ease-in-out;
/* Opera */
-o-transition: all 0.3s ease-in-out;
/* Internet Explorer */
-ms-transition: all 0.3s ease-in-out;
}
Կան որոշակի պսևդոէլեմենտներ, որոնք օգտագործվում են միայն Internet Explorer և Edge բրաուզերների համար՝
::-ms-browse – ոճ է հաղորդում ֆայլ ընտրելու կոճակին։
::-ms-check – ոճ է հաղորդում ռադիո կոճակներին և թռչնակ վանդակներին։
::-ms-clear – ոճ է հաղորդում որևէ դաշտի տեքստը ջնջող կոճակին։
::-ms-expand – ոճ է հաղորդում ցուցակը բացող կոճակին։
::-ms-fill – ոճ է հաղորդում <progress> ինդիկատորին։
::-ms-fill-lower ::-ms-fill-upper ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track – ոճ է հաղորդում <input type=”range”> -ին։
::-ms-reveal – ոճ է հաղորդում գաղտնաբառը ցուցադրող կոճակին։
::-ms-value – ոճ է հաղորդում <form> – ի էլեմենտներին։
:host :host() ::slotted
:host :host() ::slotted –նախատեսված են վեբ կոմպոնենտների համար։
Վեբ կոմպոնենտը html կոդի մի մաս է, որն ունի մեր կողմից պատրաստված html էլեմենտներ, որոնք սահմանվում են Javascript-ի միջոցով։ Այն ունի իր առանձին DOM ճյուղավորումը, որը կոչվում է Shadow DOM` Ստվերային DOM:
DOM-ը վեբ էջում սահմանված html էլեմենտների ճյուղավորումն է՝ ծնող և դուստր էլեմենտների հաջորդականությունը։
DOM-ը պատրաստվում է բրաուզերի կողմից և DOM-ի հիման վրա է այն հաջորդաբար ցուցադրում html էլեմենտներն իրենց պարունակությամբ և ոճով։
Shadow DOM-ը, որը վերաբերում է վեբ կոմպոնենտի էլեմենտներին, նույնպես պատրաստվում է բրաուզերի կողմից Javascript կոդի հիման վրա, բայց այն ծածկված է մեր տեսադաշտից։
Shadow DOM-ի էլեմենտների հետ չենք կարող անմիջապես աշխատել՝ ենթադրենք <style> -ում դրանց ոճ հաղորդել, կամ դրանց դիմել Javascript-ում։
Shadow DOM- տեսակից է <video> էլեմենտը։ Սահմանվում է <video>-ն, բայց արդյունքում ցուցադրվում է նաև վիդեոյի համար նախատեսված որոշակի ֆունկցիաներ՝ ձայնը կարգավորել, կանգ-առ, վիդեոն նվագարկել և այլ ֆունկցիաներ։ Այն html էլեմենտները, որոնց միջոցով պատկերվում է վիդեոյի համար նախատեսված ֆունկցիաները և դրանց ոճը, գտնվում են shadow-DOM-ի ներսում և անտեսանելի են։
Կարող ենք ասել՝ <video> html էլեմենտը հանդիսանում է հիմնական DOM-ի և վեբ կոմպոնենտի՝ shadow-DOM-ի միջև կապը։
Օրինակ՝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Shadow DOM Example</title>
<style></style>
</head>
<body>
<template id="tmpl">
<style>
:host {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background: grey;
border: 5px solid red;
}
:host([centered]) {
width: 200px;
height: 200px;
background: green;
border: 3px solid orange;
}
::slotted(div) {
border: 2px solid blue;
margin-top: 10px;
}
</style>
<slot name="myExample"></slot>
<slot name="divSlot"></slot>
<slot name="centeredExample"></slot>
</template>
<script>
customElements.define(
"custom-dialog",
class extends HTMLElement {
connectedCallback() {
const tmpl = document.getElementById("tmpl");
this.attachShadow({ mode: "open" }).append(
tmpl.content.cloneNode(true)
);
}
}
);
</script>
<!-- Example 1: Regular custom dialog -->
<custom-dialog>
<span slot="myExample">Hello World!</span>
<div slot="divSlot">Hello div!</div>
</custom-dialog>
<!-- Example 2: Centered custom dialog -->
<custom-dialog centered>
<span slot="centeredExample">Centered custom-dialog example...</span>
<div slot="divSlot">Another div!</div>
</custom-dialog>
</body>
</html>
html-ի հիմնական <style> -ը դատարկ է, քանի որ վեբ կոմպոնենտի էլեմենտներին հնարավոր չէ անմիջապես հիմնական DOM-ից ոճ հաղորդել։
-<script>…</script> –Javascript-ի միջոցով սահմանվել է նոր html էլեմենտ՝ <custom-dialog> անունով։ Սա այն էլեմենտն է, որը կապ է հանդիսանալու html -ի հիմնական DOM-ի և վեբ կոմպոնենտի shadow-DOM-ի միջև։ Այն կոչվում է « Հոսթ » էլեմենտ։
-<template>-ի միջոցով սահմանվել է html-ի առանձին մաս և Javascript-ի միջոցով այն կապվել <custom-dialog>-ին․ արդյունքում կունենանք վեբ կոմպոնենտ իր առանձին Shadow-DOM-ով։ <template>-ը չի մշակվում html -ի հիմնական կոդի հետ․ այն ակտիվանում է միայն Javascript-ի միջոցով։
–<template>-ի <style>-ի մեջ սահմանվել է ոճ, որը կվերաբերի <template>-ի էլեմենտներին։
–:host – ոճ է սահմանում Հոսթ էլեմենտին՝ <custom-dialog>-ին։
–:host([centered]) –ոճ է սահմանում այն Հոսթին, որն ունի centered ատրիբուտը։ Տվյալ դեպքում <custom-dialog centered >:
–::slotted(div) – ոճ կսահմանի այն <div> էլեմենտներին, որոնք ունեն slot ատրիբուտը։
<slot> էլեմենտը սահմանում է DOM -ի կոնտենտի տեղադրման վայրը Shadow-DOM -ում։ name ատրիբուտի միջոցով սահմանվում են մի քանի սլոթներ։
<custom-dialog> -javascript -ի կողմից սահմանված էլեմենտ է, որում տեղադրված է կոնտենտը, որը պետք է հատկացվի Shadow-DOM-ում սահմանված սլոթներին:
slot ատրիբուտի միջոցով սահմանվում է այն սլոթը, որին պատկանում է տվյալ էլեմենտի պարունակությունը։
Վեբ կոմպոնենտները կարգավորված, ծածկված, հաճախակի օգտագործվող մաս է։ Դրանք պատրաստվում են որոշակի դեպքերում՝
-Սահմանում է սեփական html էլեմենտներ, որոնք ունեն իրենց ուրույն տեսքը և վարքագիծը։
-Առանձնացված ծրագրային մաս է, որը կարելի է օգտագործել վեբ կայքի տարբեր մասերում, անգամ այլ պրոեկտներում։
-Վեբ կոմպոնենտները կարող են իրար հետ համագործակցել անրհրաժեշտ վարքագծի համար։
:picture-in-picture
:picture-in-picture – ոճ է սահմանում թռչող վիդեո-օբյեկտների համար։
Տվյալ պսևդոկլասը փորձնական տարբերակում է։
video {
width: 1000px;
}
video:picture-in-picture {
width: 600px;
border: 10px solid yellow;
box-shadow: 0 0 0 5px rgb(153, 153, 153);
}
<body>
<video src="2022 Ferrari SF90 Stradale.mp4" controls></video>
</body>
:placeholder-shown
:placeholder-shown – Ի տարբերություն ::placeholder -ի, այն կարող է ոճ սահմանել ամբողջ <input> էլեմենտին, եթե նրանում առկա է placeholder ատրիբուտը։
input:placeholder-shown {
color: red;
border-color: rgb(0, 255, 55);
background-color: yellow;
height: 50px;
}
<body>
<input type="text" placeholder="type me..." />
</body>
:user-invalid :user-valid
:user-invalid :user-valid – <input> էլեմենտները տարբեր տեսակի են՝ <input type=”email”>, <input type=”text”> և այլն։ Եթե օգտվողը մուտքագրում է սխալ պարունակություն(օրինակ էլ․ հասցեն լրացնելու ժամանակ չի նշում « @ » սիմվոլը), կակտիվանա :user-invalid -ի ոճը, իսկ եթե համապատասխանում է՝ կակտիվանա :user-valid -ի ոճը։
Աջակցվում են միայն Firefox բրաուզերի կողմից։
#email-valid:user-valid {
border: 2px solid green;
}
#email-valid:user-valid + span::before {
content: "✓";
color: green;
}
#email-invalid:user-invalid {
border: 2px solid red;
}
#email-invalid:user-invalid + span::before {
content: "";
color: red;
}
<body>
<form>
<label for="email">Email *: </label>
<input id="email-valid" name="email" type="email" required />
<span></span>
</form>
<form>
<label for="email">Email *: </label>
<input id="email-invalid" name="email" type="email" required />
<span></span>
</form>
</body>
Armenian 
Russian