CSS селектори | Programming with Java

Programming with Java

/* сeлектира всички елементи с таг <p> */
p { 
    color: #222;
    font-size: 16px;
}

/* селектира едновременно всички заглавия от ниво 3 и всички параграфи */
h3, p { 
    color: #222;
    font-size: 16px;
}

/* сeлектира всички елементи, по отношение на които е зададен атрибут 
class="some-style" */

.some-style {
    color: darkblue;
    font-size: 18px;
}

/* сeлектира всички div елементи, по отношение на които е зададен атрибут 
class="another-style" */

div.another-style {
    margin: 20px;
    padding: 10px;
}

/* селектира всички параграфи, вложени в <div> */

div p {
    color: red;
}

<body>
    <div>
        <p>Този елемент ще бъде селектиран</p>
        <p>Този елемент ще бъде селектиран</p>
        <section>
            <p>Този елемент ще бъде селектиран</p>
        </section>
    </div>

    <p>Този елемент НЯМА да бъде селектиран</p>
</body>

/* селектира всички параграфи, вложени на първо ниво в <div> */

div > p {
    color: red;
}

<body>
    <div>
        <p>Този елемент ще бъде селектиран</p>
        <p>Този елемент ще бъде селектиран</p>
        <section>
            <p>Този елемент НЯМА да бъде селектиран</p>
        </section>
    </div>

    <p>Този елемент НЯМА да бъде селектиран</p>
</body>

/* селектира всички параграфи, разположени непосредствено след <div> */

div + p {
    color: red;
}

<body>
    <div>
        <p>Този елемент НЯМА да бъде селектиран</p>
    </div>
    <p>Този елемент ще бъде селектиран</p>
    <p>Този елемент НЯМА да бъде селектиран</p>
</body>

/* селектира всички параграфи, разположени след <div>, 
когато се намират в един и същи родителски елемент */

div ~ p {
    color: red;
}

<body>
    <section>
        <div>
            <p>Този елемент НЯМА да бъде селектиран</p>
        </div>
        <p>Този елемент ще бъде селектиран</p>
        <p>Този елемент ще бъде селектиран</p>
        <p>Този елемент ще бъде селектиран</p>
    </section>
    <p>Този елемент НЯМА да бъде селектиран</p>
</body>

/* Селектира непосетена хипервръзка */
a:link {
    color: red;
}

/* Селектира посетена хипрвръзка */
visited {
    color: green;
}

/* Селектира хипервръзка с поставен курсор върху нея */
a:hover {
    color: grey;
}

/* Селектира хипервръзка, върху която е натиснат ляв бутон на мишката */
a:active {
    color: blue;
}