Css selectorsCSS selectors

ipivanov No Comments CSS 44

След като научихте основните неща за CSS-a, като класове идентификатори и др. е време да преминем към видовете селектори. Начините по които може да се селектира определен елемент от HTML документа са много и различни. Тук ще ви представя отделните основни селектори, които може да се използват както по отделно така и да се комбинират. Чрез различни видове комбинации на селекторите не би трябвало да имате проблем при достъпване на сложно вложени елементи.

    1. *
      * {
         margin: 0;
         padding: 0;
      }
      

      Звездата селектира всеки един елемент от страницата ви. Този селектор се използва основно ако искате да предадете абсолютно еднакви характеристики на всички елементи. Той може също така да се използва и като дете:

      #container * {
         border: 1px solid black;
      }
      

      Тази техника не се препоръчва и не се прилага особено често в практиката.


    1. #X
      #container {
         width: 960px;
         margin: auto;
      }
      

      Както вече знаете този хаш-таг селектор ни позволява да селектираме определения елемент по идентификатор. Това е най-често срещания метод, но бъдете внимателни при прилагането му.
      Запитайте се: Дали наистина е необходимо да прилагам ID за да селектирам елемента?
      Ако имате достъпване по таг не се колебайте да го приложите вместо да използвате идентификатор.


    1. .X
      .error {
         color: red;
      }
      

      Селектор по клас. Това е селектор, който се прилага на повече от един елемент, за да станат те група и по този начин могат да се стилизират групи от елементи в HTML документа.


    1. X Y
      li a {
         text-decoration: none;
      }
      

      Следващия селектор е и най-често срещания, а именно низходящ по тагове селектор. Когато искате да спесифицирате селктора си използвате този.
      За пример: защо да селектирате всички <a></a> тагове, като може да спесифицирате само тези, които изрично се намират в <li></li>.


    1. X
      a { color: red; }
      ul { margin-left: 0; }
      

      Ако искате да селектирате всички елементи според техния тип използвайте този таг вместо идентификатор или клас.


    1. X:visited X:link
      a:link { color: red; }
      a:visted { color: purple; }
      

      В случая използваме :link пвсевдо клас за да селектираме всички <a></a> тагове, които все още не са кликнати.
      Съответно :visited е за <a></a> елементи след като вече са посетени.


    1. X + Y
      ul + p {
         color: red;
      }
      

      Този селектор е съседен селектор. Тоест тук ще се селектира <p></p> таг, който е в съседен на ul.


    1. X > Y
      div#container > ul {
         border: 1px solid black;
      }
      
       <ul>
              <li> List Item
                 <ul>
                      <li> Child </li>
                 </ul>
              </li>
              <li> List Item </li>
              <li&gt; List Item </li>
              <li&gt; List Item </li>
          </ul&gt;
      </div&gt;
      

      В този пример ще се селектира само ul листа, който е първо дете на div#container. Този ul, който е дете на първото li няма да бъде селектиран.
      Този селектор е хубав за навигации, в които имате dropdown меню.


    1. X ~ Y
ul ~ p {
   color: red;
}

Този селектор е подобен на селектора X + Y, но е с по – малка специфика. Докато X + Y ще селектира само първия елемент Y, който е непосредствено след X тук ще селектираме всяко X, което
следва Y.

 <div id="container">
    <ul>
        <li> List Item
            <ul>
                <li> Child </li>
            </ul>
        </li>
        <li> List Item </li>
        <li> List Item </li>
        <li> List Item </li>
    </ul>
    <p> Lorem ipsum dolor sit amet, &lt;a href="#" title="Some title"&gt;consectetur&lt;/a&gt; adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur <a href="#"&gt;adipisicing</a> elit, sed do eiusmod tempor. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

Ще се селектират всички <p>-та, които следват <ul>.


    1. X[title]
a[title] {
   color: green;
}

В случая ще селектираме <а>, което има атрибут title. Тези, които нямат такъв атрибут няма да бъдат селектирани.


    1. X[href=”foo”]
a[href="http://ipivanov.info"] {
   color: #1f6053; /* green */
}

С този селектор ставаме по – конкретни и ще селектираме само тези <а> – та, които водят към линк: http://ipivanov.info.


    1. X[data-*=”foo”]
a[data-filetype="image"] {
   color: red;
}

/* -------------- */

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Можем да обединим или да разделим тези селектори и по този начин да селектираме само <а> – та, които сочат съответно към .jpg, .jpeg, .png, .gif файлове.


    1. X:nth-child(n)
li:nth-child(3) {
   color: red;
}

Слектор, който е много полезен ако имаме подредени елементи в някакъв стак и искаме да достъпим определен елемент от поредния номер. Това не е нула базиран селектор и елементите започват от 1.
Просто казано ако искате да селектирате първия елемент се пише: X:nth-child(1), втория X:nth-child(2), третия X:nth-child(3) и т.н.


    1. X:nth-last-child(n)
li:nth-last-child(2) {
   color: red;
}

Това е като производна на предния селектор, само че тук елементите се броят отзад напред и в конкретния случай селектираме предпоследния елемент от стака.


    1. X:nth-last-child(n)
ul li:first-child {
   border-top: none;
}

Слектор, който по подразбиране е за първия елемент от стака.

Тези селектори могат да се комбинират по между си, но това оставям на вас.
В общи линии това са селекторите, които най – често ще стрещате в .css файла си. Разбира се има и още които са по непознати, но за оформянето на една стандартна страница смятам, че тези биха били достатъчни.

Leave a Reply Text

Leave a Reply