Note về CSS cơ bản – Selectors

69

Table HTML:

In this chapter I explained how to use the table element to present tabular data. A table consists of rows that are represented by the table row (tr) element. Each row contains a collection of table cells (td) and/or table head cell (th) elements. Columns are not explicitly defined but are inferred based on the existence of td or th elements. For example, the first element of each row is considered the first column.
You can define columns using the colgroup and/or col element. This does not actually create or define any table cells but allows you to apply styles to a specific column or group of columns. You can also group table rows into a header (thead), body (tbody), and footer (tfoot) elements for semantic purposes.
Finally, you can merge cells into a single cell by using the colspan and rowspan attributes. Since the merged cell will take up more space, you will need fewer elements in a row that contains a merged cell. Using the rowspan attribute is particularly interesting, requiring you to skip cells in subsequent rows. I recommend you add comments to your table to indicate skipped cells.

Embedded HTML Elements

Three most common embedded elements: images (img), audio, and video. The other embedded elements, scalar-vector graphics (svg) and canvas

Phân loại CSS Selector

  • Element selectors (sometimes called type selectors )
  • Class selectors
  • ID selectors
  • Attribute selectors
  •  (for example, [class∼=”book”]): The attribute value must include the word indicated by the selector value (for example, class=”some book titles”). This is exactly how the class selector works.
    • | (for example, [class|=”book”]): The attribute value must begin with a word that matches the selector value (for example, class=”book titles”)
    • ^= (for example, [class^=”book”]): The attribute value must begin with the selector value (for example, class=”books”)
    • $ (for example, [class$=”book”]): The attribute value must end with the selector value (for example, class=”checkbook)
    • * (for example, [class*=”book”]): The attribute value must contain the selector value (for example, class=”overbooked”)
  • Pseudo-class selectors
      • :active – Selects the link that has just been clicked.
      • :checked – Selects elements that are checked (applies to checkboxes).
      • :default – Selects the default element on a form, usually the submit button.
      • :disabled – Selects elements that are currently disabled (typically used for input elements.)
      • :empty – Selects elements that have no children (elements that include text are not selected).
      • :enabled – Selects elements that are enabled (typically used for input elements).
      • :first-child – Selects the elements that are the first child of its immediate parent.
      • <tag>:first-of-type – Selects the elements that is the first of the specified type within its parent.
      • :focus – Selects the element that currently has the focus.
      • :hover – Selects the element that the mouse is currently hovering over.
      • :in-range – Selects input elements that have values within the specified range.
      • :indeterminate – Selects radio buttons where none in a group have been selected. This will also select checkboxes that have the indeterminate state (this must be set through JavaScript).
      • :invalid – Selects input elements that do not have a valid value.
      • :lang(value) – Selects the elements that have a lang attribute that start with the specified value.
      • :last-child – Selects the elements that are the last child within its parent.
      • <tag>:last-of-type – Selects the elements that are the last of the specified type within its parent.
      • :link – Selects all unvisited links.
      • :nth-child(n) – Selects the elements that are the nth child within its parent.
      • :nth-last-child(n) – Selects the elements that are the nth child within its parent, counting in reverse.
      • <tag>:nth-last-of-type(n) – Selects the nth child of the specified type within its parent, counting in reverse.
      • <tag>:nth-of-type(n) – Selects the nth child of the specified type within its parent.
      • :only-child – Selects the elements that are the only child element of its parent.
      • <tag>:only-of-type – Selects the elements that are the only sibling of the specified type within its parent.
      • :optional – Selects input elements that are not required (that is, do not have the required attribute).
      • :out-of-range – selects input elements whose value is outside of the allowed range.
      • :read-only – Selects input elements that have the readonly attribute.
      • :read-write – Selects input elements that do not have the readonly attribute.
      • :required – Selects input elements that have the required attribute.
      • :root – Selects the root element of the document.
      • :target – Selects the elements with a target attribute where the target is the active element.
      • :valid – Selects input elements that have a valid value.
      • :visited – Selects all visited links.Here is the complete list of pseudo-classes:

       

    • Caution
      There are four pseudo-classes that can be used with an anchor (a) element (:link:visited:hover, and :active). If you use more than one, they should appear in this order in the style rules. For example, :hover must come after :link and :visited if they are used. Likewise, :active must come after :hover. You can use this simple mnemonic to help you remember the correct order: LoVe HAte.
      The nth-child(n) selector counts all child elements of the parent, while the nth-of-type(n) counts only child elements of the specified type. The distinction here is subtle but important. The same is true with the only-child and only-of-type selectors.
      Tip
      There’s a really useful article that explains the pseudo-classes with examples that you can find at https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/ . Take a look at this if you would like more information and a demonstration of how these work.
  • Pseudo-elements

    While pseudo-classes provide a mechanism for selecting elements, pseudo-elements actually return new, virtual elements that you can style without actually being part of the DOM. These are either empty elements or a portion of an existing element.
    Pseudo-elements start with a double colon (::) to distinguish them from pseudo-classes. These are the pseudo-elements that are available:

    • ::after – this creates an empty element just after the selected elements.
    • ::before – this creates an empty element just before the selected elements.
    • ::first-letter: Selects the first character of every selected element.
    • ::first-line: Selects the first line of every selected element. The first line is the portion of text up to the point where the text wraps to the next line.
    • ::selection : Returns the portion of an element that is selected by the user.

    Use combinators

    Kết hợp các kiểu chọn selectors ở trên ví dụ p.feature.view (các paragraph có cả 2 class)

    You can combine selectors to specify certain element hierarchies. By combining elements with one of the following combinators, you can create a more complex selector:

    • Group , (for example p, h1): A logical OR operator, selects all p elements as well as all h1 elements.
    • Descendant space (for example, header p): Selects the second element when it is inside the first element. For example, if you want all p elements that are inside a header element, use header p. The header element does not have to be the immediate parent, just somewhere in the node’s ancestry.
    • Child > (for example header>p): Selects the second element when the first element is the immediate parent. The header>p selector returns all p elements whose immediate parent is a header element.
    • Adjacent Sibling + (for example header+p): Selects the second element when the first element is the preceding sibling of the second element.
    • Follows  (for example p∼header): Selects the second element when it follows the first element (not necessarily immediately).

       

    Media Query, Media Attribute

    @media (max-width:600px)
    {
        h1
        {
            font-size: 12px;
        }
    }
    The features that can be selected in a media query are as follows:

    • width
    • height
    • device-width
    • device-height
    • orientation
    • aspect-ratio
    • device-aspect-ratio
    • color (0 if monochrome or number of bits used to specify a color)
    • color-index (number of colors available)
    • monochrome (0 if color, or number of bits for grayscale)
    • resolution (specified in dpi or dpcm)
    • scan (for TV, specifies scanning mode)
    • grid (1 if a grid device such as TTY display, 0 if bitmap)