Universal Selector - ForumEasy.com

CSS Selectors

CSS selectors are used to pin-point the target HTML elements. Here are several way to do that:

by wildcard '*';

by element;

by class;

by identifier;

by attribute;

by pseudo-class;

by at-rule query.

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/10/2016 10:08:26 PM

Edit |

Quote |

Universal Selector

The universal selector (*) is to target everyone or all HTML elements.

  * {
        color: red;
        text-align: center;
  }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/11/2016 06:46:54 PM

Edit |

Quote |

Element Type Selector

The element type selector is used to find elements with the corresponding element type name.

    p {
        text-align: center;
        color: green;
    }

Try it yourself in sandbox »

The above style is going to apply unto all <p> elements within the HTML document.

To narrow down the scope to find the element, the path can be used:

A E -- any E element that is descendant of element A;

P > E -- any E element that is child of element P;

S + E -- any E element that is immediately preceded by a sibling element S.

    table td {
        color: green;
    }
    tr > td {
        text-decoration: line-through;
    }
    table + p {
        background-color: red;
    }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/12/2016 05:41:22 AM

Edit |

Quote |

Class Selector

Class selector preceded by '.' is used to find all elements of the same class.

    .blue_underline {
        color: blue;
        text-decoration: underline;
    }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/12/2016 05:59:55 AM

Edit |

Quote |

ID Selector

While Class selector targets all elements of the same class, ID selector preceded by '#' focuses on finding a specific element with the unique identifier.

    #first {
        color: red;
        text-decoration: line-through;
    }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/12/2016 06:34:01 PM

Edit |

Quote |

Attribute Selector

Attribute selector embraced by square brackets '[]' is used to find elements which have certain attributes matched in the source document:

E[attr] -- any E element that has attribute 'attr' regardless of its value;

E[attr=val] -- any E element that has attribute 'attr' with value of 'val';

E[attr~=val] -- any E element that has attribute 'attr' containing value of 'val';

E[attr|=val] -- any E element that has attribute 'attr' with value of 'val' or starting with 'val-';

    p[class="green"] {
        color: green;
        text-decoration: line-through;
    }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/12/2016 07:12:19 PM

Edit |

Quote |

Pseudo-Class Selector

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;
    }

Points Earned: 0

CyberSpider
member
offline

posts:	47
joined:	04/10/2016
from:	San Francisco, CA

posted on: 04/12/2016 11:49:52 PM

Edit |

Quote |

At-Rule Selector

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>

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;
        }
    }