CSS
Basic II
Multiple Selectors
If you want to grab <p>s that are inside two <div>s, and not all <p>s, you can select those in the CSS tab.
div div p {
/*CSS Stuff*/
}* { }
One Selector rule them all.
opacity:[float]
Opacity attribute has one parameter which range is from 0 to 1.
display:[none/block/inline/inline-block]
- none: hidden
- block: as block unit, there is tab before and after this block.
- inline: default value, one by one until the line cannot hold them.
- inline-block: has all properties of inline, but also contain the feature of block.
> within selector
For instance, div > p { /*CSS Stuff*/ }This only grabs <p>s that are nested directly inside of <div>s. > means “Directly children”.
class="[CLASS]" & .[CLASS] { }
More specific selector can “override” the properties. When you have a bunch of elements that should all receive the same styling.
id="[ID]" & #[ID] { }
When you have exactly one element that should receive a certain kind of styling.
pseudo-class selector
Pattern like,
selector:pseudo-class_selector {
property: value;
}- hover: the content will be styled when your mouse hovering over that field.
- link: an unvisited link.
- visited: a visited link.
- active: the exactly time selecting the link.
pseudo-class selectorfirst-child & nth-child([num])
p:first-child {
color: red;
}
p:nth-child(2) {
color: red;
}*[parent-selector][space]:nth-child([num]) styles the item which same to the [child-selector]:nth-child([num]). The first one is for any type of children of this parent, but the second is for the exactly same type and same order one.
In short:
- parent: only depends on the ordering number to styling its child items.
- child: as child, depends on both of the ordering number and its type.
For example:
<body>
<h3 class="fancy">H Three (h3)</h3>
<p >Paragraph Three (h3)</p>
<p >Serious</p>
<p>Third Paragraph</p>
</body>body :nth-child(3) {
font-size:100px;
}
p:nth-child(3) {
color:red;
}