seodon.ru | Учебник CSS - Ответ по уроку Дочерние селекторы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Результат - Дочерние селекторы</title>
  <style type="text/css">
   html {
    font: 0.9em Arial, sans-serif; /* стили шрифта страницы */
    background: #ffe4e1; /* фоновый цвет */
   }
   #content { margin-right: 220px; } /* размер правого поля основной колонки */
   h1 {
    font-size: 2em; /* размер шрифта заголовка H1 */
    text-align: center; /* текст по центру */
    color: #ff6666; /* цвет текста */
   }
   h2 {
    font-size: 1.5em; /* задаем размер заголовка H2 */
    color: #66cc66; /* цвет текста */
   }
   p a { color: blue; } /* цвет ссылок в параграфах */
   p * > a { color: red; } /* цвет ссылок в параграфах, когда они закрыты в дополнительные теги */
   #menu {
    width: 200px; /* ширина блока с меню */
    position: fixed; /* фиксированное позиционирование */
    top: 10px; /* отступ от верха окна браузера */
    right: 10px; /* отступ от правой стороны окна браузера */
    background: #e3e0ff; /* цвет фона */
    border: 2px #6666ff solid; /* стили рамки */
   }
   .menuname {
    font-size: 130%; /* размер шрифта названия меню */
    text-align: center; /* текст по центру */
    color: #3333cc; /* цвет текста */
    padding: 5px; /* размер внутренних отступов */
   }
   #menu ul {
    list-style-type: none; /* убираем маркеры у элементов списка */
    margin: 0; /* убираем стандартные поля списка */
    padding: 0; /* убираем внутренние отступы */
   }
   #menu li {
    margin: 5px 0 10px 5px; /* устанавливаем размер полей для элементов LI */
   }
   #menu a {
    color: #3333cc; /* цвет ссылок в блоке с меню */
   }
  </style>
 </head>
 <body>
  <div id="content">
   <h1>Lorem ipsum</h1>
   <p>Lorem ipsum dolor sit amet consectetuer ac et auctor cursus <a href="https://seodon.ru/css/dochernie-selektory.php">Vestibulum</a>. Consectetuer nonummy mauris interdum fringilla convallis laoreet laoreet elit leo id. Orci wisi quam lobortis ante justo porttitor ultrices suscipit ipsum Nulla. Nulla elit ut dui dis a turpis gravida justo sapien malesuada. Risus orci Suspendisse Vestibulum Curabitur ullamcorper Nunc Phasellus vitae iaculis at. Nulla aliquam et ut malesuada at In ut Sed turpis libero. Consectetuer ac Lorem sapien mi tellus quis sed ante accumsan Nullam. Dictum est cursus magna consectetuer justo tincidunt augue ullamcorper a Vestibulum. Tellus ante ipsum id mauris pellentesque tellus Nulla sem vel sem. Pede dictumst semper semper iaculis nulla lacinia Donec.</p>
   <h2>lacinia Integer</h2>
   <p>Nulla lacinia Integer accumsan vitae mauris at eget Mauris non penatibus. Quis a faucibus quis sem felis penatibus at interdum Nam ante. In montes id orci suscipit et volutpat mattis volutpat velit Curabitur. Tincidunt aliquam pellentesque Curabitur interdum consequat turpis eros libero molestie convallis. Urna nec vel Nullam quis wisi mauris Vestibulum malesuada vel habitant. Lacinia arcu et porttitor Pellentesque Maecenas Duis a Ut sociis dis. Sagittis fringilla dictum lobortis malesuada Vestibulum quis tincidunt gravida ac turpis. Quis elit a Aenean Nulla nec eu Vestibulum nibh nunc interdum. Purus Vestibulum elit suscipit felis pellentesque ante pharetra justo convallis porttitor. Quisque dis augue dapibus morbi felis dolor interdum est elit interdum.</p>
   <p>Nullam id rhoncus purus condimentum dolor <em><a href="https://seodon.ru/css/dochernie-selektory.php">Phasellus fringilla</a></em> dolor eu Curabitur. Nec pede vitae scelerisque at nibh risus ut id Pellentesque Nam. Habitasse et adipiscing Nunc Aliquam augue neque justo ac augue Cum. Tellus Integer pretium parturient leo lacinia et neque justo mauris dapibus. Cursus Praesent neque pretium et nec ipsum Nam Vestibulum justo malesuada. Ipsum adipiscing faucibus laoreet pharetra libero Morbi at cursus cursus Proin. Et Aliquam et et lacus elit augue ut condimentum Integer hendrerit. Lorem lacinia metus tincidunt Integer enim nunc molestie malesuada ligula Phasellus. Sed sed magnis Nunc pretium tincidunt Pellentesque Nulla massa elit dolor. Feugiat ligula libero dui amet vitae eu porta Quisque netus Donec. Sem tristique wisi wisi mattis adipiscing dis eu commodo pellentesque quis. Tempor orci mi fames sagittis nisl Vestibulum ut consequat adipiscing mauris. Ut egestas condimentum Vivamus parturient.</p>
   <p>Nunc velit eros tellus justo ligula sed dui et Integer dis. Curabitur neque lacus sit pede et sit amet urna metus rutrum. Quis pretium nec natoque sit lacinia id nec Pellentesque a augue. Elit pede sodales arcu Vestibulum condimentum auctor pretium lobortis fringilla consectetuer. Odio orci leo pede wisi urna ornare Curabitur et morbi Suspendisse. Quis ultrices laoreet libero pede libero vitae pede mi purus in. Ipsum id Quisque cursus risus pulvinar orci Curabitur sem condimentum cursus. Porttitor et diam quis id aliquet lobortis massa Phasellus Nam ut. Lorem ligula adipiscing lacus interdum sem sem malesuada adipiscing turpis quis. Nam accumsan id Nunc porttitor Suspendisse gravida dictumst non Morbi cursus. Facilisi orci lacinia lacus iaculis penatibus dolor sed nec velit mauris. Lobortis elit magna et Sed consequat Vestibulum netus Nullam venenatis Sed. Vestibulum eget porttitor lacinia pellentesque est tincidunt sociis odio ac tellus. Wisi In ipsum et id Donec tellus hac aliquam pellentesque.</p>
   <p>Et ante ligula nec sed pellentesque consequat enim dictumst Sed nibh. Tellus wisi et dapibus nec urna risus dui Sed Nunc mollis. Curabitur elit fringilla dui molestie semper tristique ac dolor leo sapien. Mus orci risus tincidunt hendrerit et ac ultrices laoreet semper nec. Velit tortor fames risus feugiat Curabitur enim justo quis quis ac. Eros adipiscing elit porttitor tincidunt faucibus Sed natoque Sed vel vel. Et rutrum convallis dui orci tristique condimentum pharetra vel ipsum condimentum. Mauris elit eu amet tristique lacinia pede Quisque Pellentesque consequat Duis. Quis sed quis Quisque Morbi Donec pede justo condimentum pulvinar nunc. Quis pede Praesent ligula volutpat justo risus id nulla Vestibulum dui. Ac faucibus eu orci nibh elit vitae wisi.</p>
   <h2>Curabitur feugiat</h2>
   <p>Dis <b><a href="https://seodon.ru/css/dochernie-selektory.php">Curabitur feugiat</a></b> elit elit urna sed elit convallis vitae et. Nulla vestibulum quis Nulla iaculis Aenean id parturient quis et semper. Tellus cursus lorem dis turpis pretium metus volutpat dolor tempus dapibus. Ipsum Aliquam eget dictumst volutpat ligula nibh ut pede vel Curabitur. Duis ac dapibus convallis est accumsan laoreet lorem auctor scelerisque at. Mus eu vitae Maecenas et et congue et pede rutrum semper. Urna tempus id Sed lorem Vivamus feugiat metus ut Proin Integer. Fames elit vel tellus ut Vestibulum ac ligula tellus sem et. Sed eget gravida tempor sed felis tellus eu pretium Nam feugiat. Nunc neque urna Phasellus velit dignissim id ligula mauris ac rhoncus. Laoreet eros tempus neque Phasellus at sodales orci nibh eleifend pellentesque. Feugiat dui senectus interdum sit Vivamus porttitor tristique velit fringilla nec. Consectetuer nunc tempor ligula Nam nonummy sit egestas Curabitur at vel. Quisque tempor hac convallis at Vestibulum nec montes Vestibulum Nulla nulla. Phasellus dui justo Donec vel quam Nunc tincidunt nunc lacinia elit. Facilisi ac semper eros amet convallis sodales adipiscing tortor est tincidunt. Pede facilisi molestie tristique Pellentesque faucibus Curabitur adipiscing magnis Nam porttitor. Vel sit mattis suscipit Sed sem consequat nunc magnis Aliquam et.</p>
   <p>Consequat platea dolor Pellentesque dui nec nibh pretium dolor purus quis. Et dui tellus tincidunt id hendrerit dui dis quis Quisque Morbi. Eros Nam ac dolor vitae Nam Morbi orci justo justo lacus. Dolor leo ipsum amet ipsum Curabitur Morbi lobortis magna lacinia mauris. Praesent malesuada Aenean pretium congue porttitor orci turpis Aenean laoreet nascetur. Leo at vitae pharetra quis elit nulla metus ut Nulla id. Quam amet vitae orci montes vestibulum justo ac id Vivamus semper. Elit Curabitur dolor tempus interdum urna massa In adipiscing Nam sem. Sed non id mattis congue Donec id Aenean pretium ullamcorper montes. Pretium nisl Curabitur risus congue Morbi sem.</p>
   <p>Velit orci lacus laoreet accumsan pretium In accumsan elit rhoncus quis. Eu Vivamus Vivamus elit ut congue congue lorem velit tristique magna. Velit auctor sodales ornare volutpat eu ut Vestibulum at porttitor felis. Elit dui aliquet Vestibulum et et pharetra dictum consectetuer nascetur Phasellus. Amet tincidunt Curabitur convallis semper elit enim eget pretium nibh sem. Sociis quis Quisque adipiscing ut Sed hac massa magnis Sed quis. Egestas quis tellus tristique tempus ut Nunc gravida sed at Nam. Hendrerit vitae pellentesque Curabitur Nam Maecenas hendrerit Donec libero laoreet Curabitur. Ipsum elit libero pede egestas condimentum nulla Nullam suscipit enim tincidunt. Nunc ac mi dignissim lobortis Lorem porttitor nulla Aenean orci laoreet. At nulla non lorem lorem mus tellus egestas nec massa Nam. Gravida Sed justo lorem ligula Ut In Vivamus Aenean tincidunt interdum. Sit mauris cursus ipsum nec magnis nibh.</p>
   <p>Nullam convallis consequat lorem nascetur elit et tincidunt convallis et sociis. Nisl a semper lacus in libero augue Morbi et consequat ac. A sit pulvinar et quis In sapien quis commodo pretium gravida. Cursus eros non Nam Sed ac commodo magna justo Sed lorem. Semper non volutpat justo senectus ut ac hac eu eget ultrices. Curabitur velit Morbi et et Nulla auctor scelerisque Praesent In consectetuer. Quam Nulla hac Vestibulum pretium sociis Duis in dui Fusce elit. Vestibulum lobortis Vivamus ligula tincidunt enim at in Integer fringilla et. Urna aliquet tincidunt nibh Vestibulum semper porta amet consectetuer at egestas. Auctor Fusce mus nulla laoreet Phasellus Sed enim gravida dapibus laoreet. Fermentum Vestibulum consequat a ante congue felis leo augue vitae quis. Quisque vel dapibus commodo sapien scelerisque mollis quis egestas consectetuer amet. Elit fermentum ut Curabitur Maecenas gravida ac Fusce Curabitur interdum Duis. Eu Morbi orci lorem et Lorem tempus Aenean sem.</p>
   <h2>Curabitur platea</h2>
   <p>Quis auctor hac sagittis Curabitur platea consectetuer mollis Sed urna tellus. Vivamus et condimentum lacinia magnis consectetuer ligula tellus pretium Nulla Phasellus. Velit In consectetuer semper mollis ante faucibus tincidunt pellentesque Aenean tincidunt. Felis metus neque a vel libero ipsum Sed Vestibulum lacinia nunc. Semper pretium eros pulvinar ipsum Pellentesque nibh tincidunt elit pede libero. Dignissim consequat ipsum lacus neque tristique cursus elit tellus nunc Nunc. Mattis mattis Vivamus auctor nulla ac id ut purus Integer quis. Ipsum at sem habitant et Morbi ut amet tristique et eros. Sit elit Nam tortor lorem sapien nibh Phasellus tristique Aenean turpis. Quisque neque.</p>
   <p>Nulla libero Ut tincidunt justo lorem Aliquam pretium at ac tempor. Quis Fusce consequat auctor leo consectetuer morbi tincidunt pretium tempus Pellentesque. Integer natoque tortor condimentum ipsum orci Nam Vivamus sollicitudin nec nunc. Vestibulum Aenean gravida mi risus Vivamus risus quis Aliquam Pellentesque eget. Orci Vestibulum Sed pede sem condimentum nibh magnis Vestibulum a nunc. Penatibus senectus et semper sem tempus at est Phasellus vel Lorem. Augue at cursus libero odio ligula Vestibulum orci commodo libero Mauris. Purus libero dictumst In purus ante consequat ipsum leo leo Sed. Praesent consequat Vestibulum enim a elit velit Suspendisse odio eros eget. Ridiculus vitae Nam iaculis auctor lacus id fermentum netus pede non. Ut vel at risus fringilla accumsan non in.</p>
   <p>Quis et Vivamus pretium urna odio lacus nonummy tellus at eget. Et Nunc Aliquam nonummy Phasellus risus Sed senectus tincidunt vitae tellus. Mauris dolor et adipiscing eget egestas wisi quis Phasellus elit justo. Aliquet consequat Morbi vitae vitae Lorem Sed ut Morbi at sem. At Morbi orci ut ullamcorper elit Phasellus orci pellentesque pellentesque Sed. Curabitur vel sapien Donec est ridiculus dictumst malesuada wisi lacinia pellentesque. Sollicitudin enim congue dis orci penatibus tempus eu condimentum vel enim. Lorem amet vestibulum est Phasellus tincidunt Nulla arcu penatibus Sed pellentesque. Felis dictumst dui nibh dui et Morbi ac Cras magna enim. Ut pede Donec wisi malesuada libero Integer ac adipiscing vel Maecenas. Donec mattis Vestibulum laoreet semper metus Vestibulum sed Vestibulum fringilla metus. Vel mauris et id morbi Quisque Curabitur cursus commodo neque Nam. Vitae consectetuer elit aliquam nulla Pellentesque Nam Pellentesque laoreet felis ipsum. Leo metus dui ligula ipsum amet Vestibulum facilisis Nunc Vestibulum id. Curabitur libero wisi Phasellus purus.</p>
   <p>Nam id Nulla rhoncus congue consectetuer eleifend pretium mauris Sed tempor. Ipsum sed risus ipsum est lorem convallis dui Nullam dapibus dictum. Habitasse facilisi id est Quisque risus enim vitae fermentum vitae tincidunt. Nec et Vivamus et lorem sem lacus metus semper et et. Arcu ligula Lorem nibh Nunc magna leo Vivamus massa ac eu. Ac nec at pede pede congue habitasse nulla laoreet netus sed. Urna ipsum nec morbi at et eget tempus urna lobortis natoque. Eros Maecenas molestie In orci tortor orci dui eu Donec in. Mollis Nulla penatibus vel enim volutpat dui Nullam Nam fames nisl. Lorem justo pede quis dignissim pretium pretium at urna quis magna. Pellentesque Vivamus Nam sit ut egestas pretium non Praesent wisi congue. Cursus Pellentesque tincidunt cursus Cum Nunc Curabitur tincidunt turpis facilisis risus. Nibh id Ut felis pulvinar dui vel quis tortor volutpat sagittis. Facilisi sed vel quis pharetra sem consectetuer interdum Cum habitasse at. Tempus Lorem Vestibulum sed pellentesque sapien interdum consequat ut elit interdum. Mollis id congue dolor interdum semper Suspendisse id cursus mus lacinia. Nulla elit Praesent Phasellus nisl congue adipiscing nunc id tellus Nam. Pretium wisi elit Donec porta eros senectus sed Curabitur sagittis id. Ut.</p>
   <p>Lacinia hac fringilla Nullam consequat magna leo tristique sed vitae vel. Pellentesque Aliquam nibh enim et elit Aenean facilisis non dui eleifend. Curabitur tempus et est id dis tellus pede molestie libero semper. Urna condimentum mauris consequat enim pede et Cum Curabitur Nam Nam. Nam justo nunc pretium volutpat Vivamus nunc consequat Pellentesque sapien mus. Mauris libero malesuada Mauris Nulla malesuada enim volutpat interdum quis et. Nibh semper felis pede eleifend dis interdum hendrerit mauris Cras est. Pellentesque tincidunt a nulla in elit nunc metus condimentum nunc Nullam. Curabitur Lorem dui accumsan consequat mi platea neque sed et amet. In id augue dui wisi nec hac augue odio laoreet ante. Convallis semper magnis Phasellus quis Nulla tellus sit sem neque eget. A pretium porttitor lacus sem tellus porttitor at adipiscing a laoreet. Ultrices adipiscing Integer id Vestibulum Nullam semper risus orci Nulla Pellentesque. Lacinia pede accumsan.</p>
  </div>
  <div id="menu">
   <div class="menuname">Меню</div>
   <ul>
    <li><a href="https://seodon.ru/kak-sdelat-sait/">Как сделать сайт</a></li>
    <li><a href="https://seodon.ru/html/">HTML для начинающих</a></li>
    <li><a href="https://seodon.ru/css/">CSS для новичков</a></li>
    <li><a href="https://seodon.ru/programs/">Программы для сайта</a></li>
   </ul>
  </div>
 </body>
</html>

Вообще, в большинстве случаев вполне можно обойтись без использования дочерних селекторов — их с успехом можно заменить селекторами потомков, которые менее специфичны и более удобны. Но иногда, иногда без них просто не обойтись, особенно, если хочется сократить объем HTML и не плодить лишние классы и идентификаторы.

Ну а как вам позиционирование, понравилось? Удобная вещь, правда? Ведь таким образом можно любой элемент на странице установить там, где захочется, а не там, где он реально находится в HTML-коде. Правда, запутанная это штука — позиционирование. Я не говорю сейчас о фиксированном варианте, с которым вы столкнулись в этом уроке, тут как раз все просто — сказал браузеру, что элемент будет зафиксирован, задал координаты относительно краев окна браузера и все. Я говорю об относительном и особенно об обычном абсолютном позиционировании, вот тут да, тут приходится шевелить извилинами. Причем не потому, что это так уж сложно, а просто потому, что немного необычно и непривычно. Особенно трудно принять и осознать тот факт, что когда позиционируется один элемент, то иногда надо свойство position почему-то указывать не только у него, но и у его предка. Мне этот момент в свое время труднее всего было понять.

Поэтому я вам рекомендую сделать следующее. Выделите себе как-нибудь часика три-четыре, чтобы заняться «препарированием» этого страшного зверя. И поверьте, там ничего сложного, зато потом будете гордиться собой! :)

Вернуться в урок

→ Перейти к следующему уроку