Працягваем магчымасці css

selector1+selector2. Суседзі. Уласцівасці прыменяцца толькі элементу selectar2, які мае суседа зверху selectar1. Зробім жоўтым параграф(selector2), які мае суседа зверху div(selector1).

        <head>
<style> div + p {
background: yellow;
}
</style>
</head>
<body>
<div>I am upper neighbor!</div>
<p>I am yellow!</p>
</body>
Ня блытайце суседа з бацькам.
        <head>
<style> div + p {
background: yellow;
}
</style>
</head>
<body>
<div>I am upper neighbor!
<p> I am not yellow, div is my father, not neighbor!</p>
</div>
<p>I am yellow again!</p>
</body>

selector1selector2. Абірае элемент які мае адначасова пералічаныя селектары. Абяром секцыя якая мае клас new.

                <head>
<style> section.new {
background: yellow;
}
</style>
</head>
<body>
<section class="new">I am yellow section!</section>
<section>I have not class "new"</section>
<div>I am not section </div>
</body>
Вельмі карысны прыем. Можам пералічыць колькі заўгодна селектараў selecta1selectar2selectar3 і г.д.

Астатнія тыпы селектараў

Памятаеце мы з Вамі ўжо разглядзелі селектары тэгаў(header),класаў(.warning) і ідэнціфікатараў(#sidebar)?
Пазнаёмімся з астатнімі тыпамі. Сустракаем атрыбуты, псеўдакласы і псеўдаэлементы.

[attr=”value”]. Атрыбуты. Напрыклад, мы хочам абраць элементы якія маюць атрыбут href.

            <head>
<style>
[href] {
background: green;
}
</style>
</head>
<body>
<a href="#"> I'm have attr href, and I am green!</a>
<a href="#"> I'm have attr href, and I am green!</a>
<a> I'm have attr href!</a>
</body>

Таксама, можна абіраць элементы і па значэнне атрыбутаў. Абяром спасылкі, якія маюць значэнне href=”#”.

            <head>
<style>
[href='#'] {
background: green;
}
</style>
</head>
<body>
<a href="#"> My href value equal '#' </a>
<a href="http://vk.com"> My href value not equal '#'</a>
</body>

selector1:pseudoclass. Псеўдакласы. Крутая рэч. Браўзер дае нам дапаможнікі. Напрыклад мы хочам, калі наводзім мышкай на спасылку, яна змяніла свой колер. Проста спасылка будзе у нас блакітная, а калі наводзім на яе будзе жоўтая. Вось менавіта калі мышка знаходзіцца над элементам, мы можам заселекціць яе па псеўда класу :hover.
Разглядзім на прыкладзе.

               <head>
<style>
a {
background: blue;
}

a:hover {
background: yellow;
}
</style>
</head>
<body>
<a href="#"> Hover me!</a>
</body>
Напрыклад адчынем прыклад сайту і паглядзім, колькі зроблена на псеўдакласе :hover.(меню, малюнкі, іконкі) Разглядзім некалькі псеўдакласаў.
:first-child – абірае першы элемент. Напрыклад зробім першы параграф жоўтым.
               <head>
<style>
p:first-child {
background: yellow;
}
</style>
</head>
<body>
<p>1 paragraph. yellow.</p>
<p>2 paragraph.</p>
<p>3 paragraph.</p>
<p>4 paragraph.</p>
</body>
:not(selector) – абірае элемент які не змяшчае selector. Абіраем параграф які не мае класа new-comment.
                   <head>
<style>
p:not(.new-comment) {
background: grey;
}
</style>
</head>
<body>
<p class="new-comment">I have new-comment class</p>
<p class="new-comment">I have new-comment class</p>
<p>I have not new-comment class, then I am grey!</p>
</body>
:nth-of-type – абіраем элемент па нумару. Напрыклад, усе 3 каментар – шэры.
                   <head>
<style>
.comment:nth-of-type(3) {
background: grey;
}
</style>
</head>
<body>
<section class="comment">Hey, how are u?</section>
<section class="comment">Fine u?</section>
<section class="comment">I am grey:(</section>
<section class="comment">Why??</section>
</body>
Таксама можа мець значэнне, цотны(even), няцотны(odd) і выраз(3n) Канешне, поўны спіс псеўдаэлементаў можна паглядзець тут

selector1:pseudoelement. Псеўдаэлементы. Генерыруем элементы на сss. Напрыклад, псеўдаэлемент :after. Пасля параграфу дададзім тэкст – “read more”.

           <head>
               <style>
                   p:after {
                       content: "read more";
                   }
               </style>
           </head>
           <body>
           <a href="#"> Hover me!</a>
           </body>
        
Падрабязны агляд псеўда-элементаў глядзім тут. Таксама варта паглядзець што можна рабіць на псеўдаэлементах тут.

Спеціфычнасць

Разглядзім наступны прыклад.

<head>
<style>
p {
background: yellow;
}
p {
background: blue;
}
</style>
</head>
<body>
<p> I am blue, why?</p>
</body>
Чаму наш параграф блакітны а не жоўты?
Па-парадку разбяромся, як браўзер вырашае які стыль прымяніць пры канфліктах.
Калі да аднаго элементу адначасова прымяняюцца супярэчлівыя стылявыя правілы, то больш высокі прыярытэт мае правіла, у якога значэнне спецыфічнасці селектара больш. Спецыфічнасць гэта некаторая ўмоўная велічыня, якая лічацца наступным чынам. За кожны ідэнтыфікатар (у далейшым будзем пазначаць іх колькасць праз a) налiчваецца 100, за кожны клас і псевдокласс (b) налiчваецца 10, за кожны селектар тэга і псевдоэлемент (c) налiчваецца 1. Складаючы названыя значэння ў пэўным парадку, атрымаем значэнне спецыфічнасці для дадзенага селектара.
            li             {} /* a=0 b=0 c=1 -> спецыфічнасць = 1   */
            li:first-line  {} /* a=0 b=0 c=2 -> спецыфічнасць = 2   */
            ul li          {} /* a=0 b=0 c=2 -> спецыфічнасць = 2   */
            ul ol+li       {} /* a=0 b=0 c=3 -> спецыфічнасць = 3   */
            ul li.red      {} /* a=0 b=1 c=2 -> спецыфічнасць = 12  */
            li.red.level   {} /* a=0 b=2 c=1 -> спецыфічнасць = 21  */
            #t34           {} /* a=1 b=0 c=0 -> спецыфічнасць = 100 */
            #content #wrap {} /* a=2 b=0 c=0 -> спецыфічнасць = 200 */
        
У нашам прыкладзе, правілі маюць аднолькаваю спецыфічнасць 1 і таму прымянілася тое, што ніжэй.
Убудаваны стыль(атрыбут style у элемента) мае спецыфічнасць 1000.
У экстрымальных умовах, калі Вам трэба перакрыць усе стылі для элемента “па-хуткаму”, проста дадаем на правіла !important. Ён перакрывае ўсё, і карыстацца ім не пажадана.
            .some-new {
                background: yellow !important;
            }
        

Спадчынасць

Некаторыя ўласцівасці бацькоў перадаюцца іх дзеткам. Гэта – color; font; position; text-align; letter-spacing; line-height; text-indent; list-style;
Што значыць перадаюцца. Гэта значыць калі, напрыклад, бацька мае уласцівасць color: grey, то усе яго дзеткі(змест) будуць таксама мець шэры тэкст колеру, калі ня вызначана інакш.

        <head>
<style>
.comments-wrapper {
color: grey;
}
.comments-wrapper span {
color: red;
}
</style>
</head>
<body>
<section class="comments-wrapper">
I am grey.
<p>
and I grey.
<span> I am red</span>
</p>
</section>
</body>

Хатняе заданне: Зрабіць стылі для спасылак, па якім ужо пераходзілі(:visited).
Кожны 4 параграф – іншага колеру(nth-of-type)
Змяняць бэкграўнд на hover.
Зрабіць выпадаючае меню на hover. http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Наступны занятак