[CSS] Child Selector ">" and ul li странен behaviour


3
Вчера на лекцията по CSS на Pavel Kolev се получи един интересен case, когато обясняваше child selector-a ">".
Case-a е следния: Имаме вложен списък в списък и се опитваме чрез child selector да хванем само елементите на основния списък. Когато, обаче, го показаха, мисля че за пример се използваше color за стил на
  • -то, което доведе до ефекта, че независимо от използването на ul#parent > li, всички li-та в списъка се оцветиха.
    Помислихме си, че е някъде наша грешка, но не би! След като си поиграх малко, наистина ul > li хваща background, border и т.н., но не и color, ОСВЕН ако преди ul > li {color} не сетнем цвят чрез ul li {color} O_o ...
    Ето едно codepen-че към теста: http://codepen.io/joe/pen/xEcvG
    Ако разкоментирате ul li rule-a в css-a, ще видите, че второто правило влиза в действие. Otherwise - ul > li не работи както предполагаме..



  • Отговори



    3
    Според мен всичко си е точно: ul>li color:red хваща втория ol>li, защото ol>li е част от ul>li
    1) оцвети всички direct child li на ul в color: red; Тук втория ol>li e част от първия li и color се inherit, докато border-a не.
    или аз не разбирам нещо?
    Ако разкоментираме горния ред мисля, че се следва presedence-a последното важи. 1.) оцвети всички li в ul в blue 2.) оцвети direct child li в червено и съответно втория ol>li си остава син.
    За едно и също ли говорим или и аз се овъртях нещо. :)

    от vlad0 (6103 точки)


    0
    Ами, това което вчера се чудехме е: ul > li би трябвало да хване всички непосредствени child елементи li, т.е. би следвало да не оцвети ol li вложените. Виж ситуацията с border-a, когато е коментиран първия ред: border-a хваща както се очаква - т.е. само непосредствените деца li на ul-то. Ъпдейтнах pen-чето така че да селектирам даже през id (въпреки че не е необходимо.)
    Та, ul > li {border} работи as expected, т.е. border-ва само li-тата на ul, a не на вложеното ol, но ul > li { color } не се държи така, а оцветява и вложените ol li. Точно това се получи и вчера. Но ако преди ul > li сетнем ul li {color} и след това пуснем child selectora се държи както очакваме, т.е. оцветява само непосредтсвените деца li на ul-то.
    уфф.. доста изпизах, надявам се да съм успял да го опиша тоя път :)

    от nickeyz (878 точки)

    0
    Значи правилно съм те разбрал. Аз бях на същата лекция с Pavel Kolev :) Идеята ми е, че color property-то се наследява на от parent-а на child-a в случая от
    • на child-a
      1. color -> inherited: Yes http://www.w3schools.com/cssref/pr_text_color.asp Докато border-a е inherited-NO http://www.w3schools.com/cssref/pr_border.asp Поне за мен това горе си работи напълно нормално :) Ама знае ли човек ... :D

    от vlad0 (6103 точки)



    1

    При нас на лекцията с Михаил Петров се получи същото. Просто в повечето случай "div>ul" не селектира по различно от от "div ul".

    Ето как на конкретния пример можеш да го постигнеш:

     

    ul li { border: 1px solid red; color: red; }
    ol li {border: 1px solid blue; color: blue}

    от bobbykolev (4168 точки)


    0
    т.е. все едно в html snippet-a има:

    Aко това е случая, то винаги ще селектира всеки вътрешен защото div ul конструкцията е такава. В смисъл ако е правилно написан html-a, по-вероятно е винаги да има div с child ul.

    от nickeyz (878 точки)


    1
    Не помня дали вчера проблема беше свързан с цвета. Но наистина ако сме го пробвали с цвят няма всъщност проблем защото ние задаваме цвят на първото ниво li-та и всички негови наследници (т.е. вложените списъци)приемат същия цвят, защото е cascading. Така че не съм убеден, че проблема идваше от цвета

    от paveld3 (17458 точки)


    0
    Почти съм сигурен, че точно със color се получи, в крайна сметка май ми отговориха на въпроса защо така става - inheritance..

    от nickeyz (878 точки)