CSS - Selectors&Display&Units
Tags: review, css, programming
Published: 2022-06-10 08:15:20

### Contents

- CSS Selectors
- Display properties
- CSS Units

#### 1.CSS Selectors

- <b>Universal Selector</b>
  It selects everything in the document and apply styling to them.
  ```css
  * {
    color: green;
    margin: 0;
    padding: 0;
  }
  ```

* <b>Element Selector</b>
  It selects and gives styling to all elements with the same specified element name.

  ```css
  p {
    color: red;
  }
  ```

* <b>id Selector</b>
  It selects the target by id and apply styling to all specified elements with a selected id.

  ```css
  #button {
    width: 200px;
    height: 200px;
    background: grey;
  }
  ```

* <b>Class Selector</b>
  It selects all elements with a specified class and gives styling to them.

  ```css
  .center {
    text-align: center;
  }
  ```

* <b>Descendant Selector</b>
  It selects only those elements that are descendants of a specified element and gives styling to them.

  ```html
  <div>
    <h2>I am h2</h2>
  </div>
  ```

  ```css
  div h2 {
    background-color: green;
  }
  ```

* <b>Adjacent Selector</b>
  It selects the element which is right next to another element at the same level of the hierarchy.

  ```css
  div + p {
    color: red;
  }
  ```

* <b>Child Selector</b>
  It selects all elements that are the children of a specified element.
  Child Selector vs. Descendant Selector

  - Child Selector: It selects only the immediate descendant.

  * Descendant Selector: It selects all the descendant.

  ```css
  div > h1 {
    color: green;
  }
  ```

* <b>Attribute Selector</b>
  It selects all elements by the name or value of a given attribute and apply styling to them.

  ```html
  <h3 id="title" class="friend" rel="newfriend">David Walsh</h3>
  ```

  ```css
  h3[rel="newfriend"] {
    color: yellow;
  }
  ```

* <b>Pseudo Classes Selector</b>
  If you want to style an element based on the state of a specified element, you can use pseudo classes for that.

  ```css
  selector:pseudo-class {
    property: value;
  }
  ```

  e.g.

  ```css
  button:hover {
    color: green;
  }
  ```

* <b>Pseudo Element Selector</b>
  It allows you to apply styling to the specific piece or fragment of the selected element. For example, style the first character, or line, of an element.
  ```css
  selector::pseudo-element {
    property: value;
  }
  ```
  ```css
  p::first-line {
    color: green;
  }
  ```
  <a href="https://www.geeksforgeeks.org/10-css-selectors-every-developer-should-know/">10 CSS Selectors</a>

#### 2.Display properties

- display: none;
  The element is completely removed, as if it wasn't in the HTML code in the first place.

* display: inline;
  The element is turned into an inline element: it behaves like simple text. Any height and width applied will have no effect.

* display: block;
  The element is turned into a block element: it starts on a new line, and takes up the whole width.

* display: inline-block;
  The element shares properties of both an inline and a block element:

  - inline because the element behaves like simple text, and inserts itself in a block of text
  - block because you can apply `height` and `width` values

* display: list-item;
  The element behaves like a list item: `<li>`. The only difference with block is that a list item has a bullet point.

* display: table;
  The element behaves like a table: `<table>`. It can be very useful when you want to make some element's layout like a table.
  e.g.

  ```html
  <div class="wrap">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
  ```

  ```css
  .wrap {
    display: table;
  }
  .block {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
  ```

* display: table-cell;
  The element behaves like a table cell: `<td>` or `<th>`. Its content and child elements behave like table cells.

* display: table-row;
  The element behaves like a table row: `<tr>`. Its content and child element behave like table cells.

* display: flex;
  The element is turned into a flexbox container. On its own, it behaves like a block element. Its child elements will be turned into flexbox items.

* display: inline-flex;
  The element shares properties of both an inline and a flexbox element:

  - inline because the element behaves like simple text, and inserts itself in a block of text
  - flexbox because its child element will be turned into flexbox items

* display: grid;
  The element is turning into an grid container. On its own, it behaves like a block element. Its child elements will be turned into grid items.
  <mark>Flexbox vs. Grid: Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both.</mark>

* display: inline-grid;
  The element shares properties of both an inline and a grid element:
  - inline because the element behaves like simple text, and inserts itself in a block of text
  - grid because its child element will be turned into flexbox items

<a href="https://cssreference.io/property/display/">display properties</a>

#### 3.CSS Units

- Absolute Lengths

  - `cm` - centimeters
  - `mm` - mellimeters

  * `Q` - Quarter-millimeters(1Q = 1/40th of 1cm)

  - `in` - inches(1in = 96px = 2.54cm)
  - `px` - pixels
  - `pt` - points(1pt = 1/72th of 1in)
  - `pc` - picas(1pc = 12pt)

- Relative Lengths

  - `em` - Relative to the font size of the parent, in the case of typographical properties like `font-size`, and relative to the font size of the element itself, in the case of other properties like `width`

  ```html
  <p>
    I am a paragraph
    <span>I am a span</span>
  </p>
  ```

  ```css
  p {
    font-size: 20px;
    border: 1px solid;
    <!-- width property's em is relative to the font size of the element itself. So here width = 2 * 20px = 40px -->
    width: 2em;
  }
  span {
    <!-- font-size property's em is relative to the font size of the parent. So here the font-size = 2 * 20px = 40px -->
    font-size: 2em;
    border: 1px solid;
    display: block;
    <!-- width property's em is relative to the font size of the element itself. So here width = 2 * (2 * 20px) = 80px -->
    width: 2em;
  }
  ```

  - `rem` - Relative to font-size of the root element(root em). This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px

  * `vw` - Relative to 1% of the width of the viewport
  * `vh` - Relative to 1% of the height of the viewport
  * `%` - Relative to the parent element

  <a href="https://www.w3schools.com/cssref/css_units.asp">CSS Units - W3Schools</a>
  <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Units - MDN</a>