CSS Selectors

CSS Specificity:

"being as specific as it makes sense to be"

From Highest to Lowest

• Inline Styles
• IDs
• classes, pseudo-classes(single-colon), attributes
• elements, pseudo-elements(double-colon)

 * - universal selector has '0' priority, i.e. of worth "0"


Difference between "ele1 ele2" and "ele1 > ele2" in css:

• "ele1 ele2" applies the styles to all the "ele2" elements, which are inside "ele1"
• "ele1 ele2" applies the styles to all the "ele2" elements, whose direct parent is "ele1"

eg:
html:
        <div>
            <p>First Paragraph
                <span>Span inside paragraph</span>
            </p>
            <span>Individual span element</span>
        </div>

case 1:
div span {
    background-color: red;
}

both the spans will get "red" background-color

case 2:
div > span {
    background-color: red;
}


only the individual <span> element gets "red" background-color


Difference between "#id.class" and "#id .class":

#id.class: apply css to elements with id "id" and have class "class". Both has to match for a single element.

Select the element which has an ID of "id" and also a class name of "class".

eg:

#header.callout { }

<div id="header" class="callout">

</div>

 
#id .class: apply css to elements with id "id" and have class "class". Can match to a single element, or, can apply to child elements with class "class", whose "any parent" has id "id"

Select all elements with the class name "class" that are decendents of the element with an ID of "id".

eg:

#header .callout { } 

<div id="header" class="callout">

      <div class="callout">

      </div>

</div>

Multiple classes:

.class1.class2: apply to elements, which have both the class names

.class1 .class2: apply to elements, which has class ".class2" and its any parent has ".class1"