| |
At-Rule Selector |
|
|
Subject: At-Rule Selector
Author: CyberSpider
In response to: Pseudo-Class Selector
Posted on: 04/12/2016 11:49:52 PM
A typical is @media at-rule selector is to target device (media) with certain conditions matched:
@media screen -- device with scree
@media print -- device can print (print preview mode)
@media speech -- device can speak
@media (feature: value) -- device with feature of value
@media only screen and not (orientation: landscape) -- logic operator: 'and', 'not' and 'only'
The list of features (can be prefixed with max- or min-):
color
color-index
aspect-ratio -- <horizontal pixels>/<vertical pixels>
aspect-ratio -- <horizontal pixels>/<vertical pixels>
device-height -- the height of device, e.g. computer screen
device-width -- the width of device, e.g. computer screen
height -- the height of viewport, e.g. browser window
width -- the width of viewport, e.g. browser window
grid -- grid or bitmap
display-mode -- e.g. fullscreen
orientation -- e.g. landscape or portrait
resolution
@media only screen and (min-width: 600px) {
/* For desktop with bigger screen */
p {
background-color: #000000;
color: #ffffff;
}
}
Try it yourself in sandbox »
>
> On 04/12/2016 07:12:19 PM CyberSpider wrote:
Pseudo-class selector is used to find element with a specific state being set:
E:link -- any E element with link;
E:hover -- any E element with link being designated;
E:active -- any E element with link being pressed;
E:visited -- any E element with link being visited;
E:focus -- any E element being focused;
E:empty -- any E element that has no child element;
E:first-child -- any E element that is the first child element of its parent;
E:last-child -- any E element that is the last child element of its parent;
E:nth-child
E:nth-last-child
E:first-of-type
E:last-of-type
E:nth-type
E:target
E:checked
E:enabled
E:disabled
a:hover {
color: red;
text-decoration: line-through;
}
Try it yourself in sandbox »
References:
|
|
|
|
