CSS Selector
- * //universal selector
- #container * //everything under #container element
- X //all elements according to their type like ul, a, li, etc
- X:visited, X:link //pseudo-class targeting – eg. input[type=radio]:checked
- #X : id selector //target single element
- .X : class selector //target multiple elements
- X Y: descendant selector //select only a set of elements under X
- X > Y //only direct children Y of X
- X + Y //first adjacent sibling selector: select only the Y that is preceded by X (eg. ul + p)
- X ~ Y //all sibling selector
- X[Y] //attribute selector (select X if it has Y as attribute)
- X[Y="Z"] //conditional attribute selector : exact
- X[Y*="Z"] //conditional attribute selector: contains
- X[Y^="Z"] //conditional attribute selector: begins with
- X[Y$="Z"] //conditional attribute selector: end with
- X[Y~="Z"] //target an attribute which has a spaced-separated list of values
- X:not(selector)
Use those tag to help you generated content around the selected elements
- X:after
- X:before
- X:hover (div:hover, a:hover)
Use pseudo-elements
- p::first-line
- p::first-letter
Use hierarchical notation
- X:nth-child(n) - eg. li:nth-child(100)
- X:nth-last-child(n)
- X:nth-of-type(n)
- X:nth-of-last-of-type(n)
- X:first-child
- X:last-child
- X:only-child
- X:first-of-type (eg. ul:first-of-type)
- X:only-of-type //no sibling from its parent container
Absolute positioning inside relative positioning
Without a relative positioned direct parent, the absolutely positioned children elements are positioning themselves in relation to the body element instead of their direct parent.
CSS positioning
The Box Model
To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins.
There are two basic types of boxes, block and inline.
- inline: follow the flow without add new line.
- block: always starts an new line before and after. (override via display: inline)
Default inline elements
- <span>, <a>, <img>, <input>
Default block element
- <div>, <p>, <ul>, <li>, <table>, <pre>, <blockquote>, <form>
Rules
- Block elements may contain both inline elements and other block elements, but inline elements may contain only other inline elements.
- CSS features a property called display, which allows you to change a block element into an inline one and vice versa.
Float
Float
- A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. To do that, you need:
div.container {
border: 1px solid #000000;
<strong> overflow: hidden; width: 100%;</strong>
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
You should see your remote debugger halt at the breakpoint for you to debug.
