Jump to content
  • 0

Тег <ol>

zzzoryn

Asked by zzzoryn,

 Share

Question

zzzoryn Explorer

zzzoryn

Posted
Posted

Здравствуйте! Помогите, пожалуйста, решить проблему. Для ol li задан класс:

ol li{border-bottom:1px dotted #ccc;}

Как убрать border у 10-го по счёту li? Всю голову уже сломал...

Кто знает, подскажите, пожалуйста...

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
lexxcode Explorer

lexxcode

Posted
Posted

Если действительно именно 10-го, то так


ol li:nth-child(10) {
    border-bottom:none;
}

Но скорей всего вам нужно убрать бордер у последнего элемента тогда это можно сделать так


ol li:last-child {
    border-bottom:none;
}

Но поскольку было бы неплохо чтобы это все стало более кроссбраузерно, то стоит выразить бордер через border-top и убирать у первого элемента


ol li {
    border-top:1px dotted #ccc;
}
ol li:first-child {
    border-top:none;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • gars
      блоки ездят куда-то. Что делать?
      By gars
      Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. 
      Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. 
      и вижу. что блок main наехал на блок header.
      Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки).  как решить и почему произошло?     Заранее благодарю всех за помощь
      Скрин прикрепляю.   
      HTML
      <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS
      body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }  

    • Vasilyyy
      Добавление и удаление классов по клику
      By Vasilyyy
      Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку?    Вот код, который я использовал в письменном виде: 
      <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button>     <script type="text/javascript">         function itemSpin(normal) {         animStart.classList.add('anim');         var start = getMilliseconds(ms);         var spinner = getMilliseconds(ms) - start;         if(spinner >= 400) {             animStart.classList.remove('anim');             // animStart.classList.add('animate');             // // animStart.classList.toggle('animate');         } };         function itemSpinRev(reverse) {             animStart.classList.add('animate');         var start = getMilliseconds();         var reverse = getMilliseconds() - start;         if(reverse >= 400) {             animStart.classList.remove('animate');          } };     </script> </body> </html> body {     background: #4f5a6e;     margin: 0;     padding: 0; } #animStart {     position: absolute;     background-color: #4f5a6e;     margin-left: 10px;     margin-top: 10px;     border: none;     font-size: 20px;     cursor: pointer;     outline: none; } #animStart.anim {     animation-name: spin;     animation-duration: 0.4s;     animation-timing-function: linear; } #animStart.animate {     animation-name: spin;     animation-duration: 0.4s;     animation-timing-function: linear;     animation-direction: reverse; } @keyframes spin {     from {         transform: rotate(0deg);     }     to {         transform: rotate(180deg);     } }  


    • GrowStay
      Помощь со "Скролируемом Меню" на html
      By GrowStay
      Здравствуйте, у меня такая проблема. Я хотел сделать скролируемое меню с ссылками на ресурс. Написал команду, и т.д. Выучил только теги html, к CSS (или как там) даже не прикасался. Так как сделать скролируемое меню с ссылками, если это вообще возможно. Объясните пожалуйста. 
    • TEO_911
      Помощь по СSS.
      By TEO_911
      Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами.
      <!DOCTYPE html> <html lang="en"> <head> <title>MySite</title> <meta charset="utf-8"> <link rel="stylesheet" href="text/style.css"> </head> <body> <header class="page-header--home"> <div class="menu"> <ul> <li>Группа творчества</li> <li>Статьи</li> <li>Форум</li> <li>Видео</li> <li>Вход</li> </ul> </div> </header> </div> <div class="avtorizacia"> <input type="submit" name="Поиск"> </div> </body> </html> body{ background-image: url(..//img/MS3.jpg); max-width: 1920px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .page-header--home{ position: relative; background-image: url(..//img/MS4.jpg); width: 1920px; height: 80px; margin-top: 0px; } ul{ position: relative; margin: 0px; } li{ display: inline; font-size: 32px; font-family: "Tahoma"; font-weight: 800; color: #45a8ff; margin: 0px; margin-top: 5px; margin-left: 80px; margin-right: 80px; } .avtorizacia{ position: relative; background-color: rgba(31, 16, 16, 0.75); max-width: 80px; height: 250px; margin-top: 100px; }  
       
       
    • ErUnDAK
      Работа с несколькими классами
      By ErUnDAK
      Дан код:
      <style> a { display: inline-block; margin-left: 5px; } .loli { height: 75px; width: 100%; display: inline-block; background-color: #0099cc; left: 600px; } .loli ul { padding: 0; margin: 0; font-size: 0; overflow: hidden; text-align: center; } .loli ul li { display: inline-block; list-style: none; font-size: 36px; } .loli ul li a { color: #fff; text-decoration: none; height: 75px; line-height: 75px; padding: 0 15px; position: relative; z-index: 10; } .loli ul li a:hover { color: black; } .loli ul li a::before { content: " "; position: absolute; left: 0; top: -25px; width: 100%; height: 150px; transform: rotate(14deg); background-color: rgba(255, 255, 255, 0.3); opacity: 0; z-index: -1; } .loli ul li a:hover::before { opacity: 1; background-color: #fff; } .menu li ul li { padding-right: 15px; background: #0099cc; } .menu li ul { position: absolute; display: none; z-index: 10; margin-left: -18px; } .menu li:hover ul { display: block; } .menu li ul li { display: block; } </style> <div class="loli"> <div class="menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">Новости</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> <li><a href="">О группе</a> <ul class="menu"> <li class="menu"><a href="">Профессия</a></li> <li><a href="">Успеваемость</a></li> </ul> </li> <li><a href="">Здание</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> <li><a href="">Контакты</a> <ul class="menu"> <li class="menu"><a href="">Расписание</a></li> </ul> </li> </ul> </div> </div> Как мне сделать, чтобы класс "меню" не затрагивал класс "лоли"?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept