Cacher is the code snippet organizer for pro developers

_

the-30-css-selectors-you-must-memorize

##CSS Selectors ###Meet The Family There are parents, children, siblings, descendants and ancestors. Siblings - also known as adjacent siblings. Just like in your family, siblings share a parent.

<div id="parentOfParagaphs"><!--Also an ancestor of the anchor-->
  <p>Child of the div above, sibling to the paragraph below.</p>
  
  <p>Child of the div above, sibling to the paragraph above and parent to the anchor. <a href="#">Child of the paragraph, sibling of none and descendant of the div.</a>.</p>

</div><!--Everything in the div is a descendant to the div-->

###The Child Selector

The child selector is represented by the greater than symbol: >.

#someDiv > p {        
        color: blue;
}

• This statement takes the paragraph tags that are children of the div and turns them blue. Note that it only works for the children of that div, not necessarily all of the descendants.

###Order

<div id="example3">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <div id="nestedDiv">
        <p>Third paragraph</p>
    </div>
</div>

#example3 p {
    color: red
}
#example3 > p {
    color: blue
}

• Makes all of the paragraphs to red, then changes only the children of the root div to blue.

#example3 > p {
    color: blue
}
#example3 p {
    color: red
}

• it initially targets the first div’s child paragraphs and turns them to blue but then changes all of the paragraphs to red

###Chaining If you really want to go nuts, you can chain child selectors together. In the following example, I first targeted any children paragraphs of the example3 div and changed them to blue, then I targeted any paragraphs that were the children of divs that were also children of another div and changed those to red.

<div id="example3">
    <p>First paragraph</p>
    <p>Second paragraph</p>
     
    <div id="nestedDiv">
        <p>Third paragraph</p>
    </div>
</div>

#example3 > p {
    color: blue;
}
div > div > p {
    color: red;
}

###The Adjacent Sibling Selector The adjacent sibling selector is represented by the plus symbol: +.

<div id="example4">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
     
    <div id="nestedDiv">
        <p>Fourth paragraph</p>
    </div>
</div>

p + p {
    color: red;
}

In our CSS, we used the adjacent sibling selector, which changed the second and third paragraph to red. This is very tricky isn’t it? instinctively, we would expect the first paragraph to be red as well. After all, the first paragraph is on the same level of the tree as the next two and has siblings. However, this selector only applies to elements that are preceded by something else. In this instance, only those paragraphs preceded directly by a sibling paragraph will be targeted. The first paragraph in the list is preceded by the div, so it isn’t changed.

###Further Chaining

<div id="example5">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    
    <div id="nestedDiv">
        <p>Third paragraph</p>
        <p>Fourth paragraph</p>
    </div>
</div>

div > p + p {
    color: red;
}

In this example, we targeted paragraphs that were children of divs that were also preceded directly by another paragraph.

###Asterisk### ####Universal Selector####

* {margin: 0; padding: 0;}

• Resets the padding and margin on every element

#someDiv * {
    color: red;
}

• Turns every element inside a div red

####Arbitrary Substring Attribute Value Selector####

div[id*='section'] {color: red;}

• Targets any div with the word “section” in the title. It can be “section3” or “section-Four”, it doesn’t matter, as long as it contains the indicated string, the subsequent styles apply.

<div id="section-1">
</div>
<div id="section-2">
</div>
<div id="section-3">
</div>
<div id="section-4">
</div>

• The code would apply to all of the divs in this HTML

CSS Floats

###Float Values###

• Left/Right float elements those directions respectively.
• None (the default) ensures the element will not float
• Inherit which will assume the float value from that elements parent element.

###Clearing the Float### Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.

###ClearValues###

• Both
  • is most commonly used, which clears floats coming from either direction.
• Left/Right
  • can be used to only clear the float from one direction respectively.
• None
  • is the default, which is typically unnecessary unless removing a clear value from a cascade.
• Inherit
  • Strangely not supported in IE. Clearing only the left or right float, while less commonly seen in the wild, definitely has its uses

Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.

####Live Demos#### Floating

####Useful Links#### the-mystery-of-css-float-property

#CSS

CSS Postions

Position values

• inherit
  • Simply inherits the value of its parent, isn’t really supported well in older versions of IE.
• static
  • The default position value for any element on the page is static. Any element with a static positioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML.
• fixed
  • This essentially anchors an object to the background so that wherever you place it, there it will stay
• absolute
  • Absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. Use top, bottom, left and right CSS properties. The starting point for the element is the very top left of the browser window
  • What position: absolute really does is position the element relative to its first non-statically-positioned ancestor (inherit doesn’t count either)
• relative
  • Relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element

####Live Demos#### Positions

####Useful Links#### the-lowdown-on-absolute-vs-relative-positioning