sharpchen

Appearance

Style Selector ​

ID selector ​

html
<head>
    <style>
        #foo {
          font-style: bold;
        }
    </style>
</head>
<body>
    <p id="foo">foo</p> <!-- [!code highlight]  -->
</body>

Class selector ​

Use . to select an element with class.

Synopsis: [<parent_pattern>].<class_name>{}

css
.class_name {

}
/* matches to all paragraph with the class */
p.class_name {

}

/* all recursive children with class_name under a paragraph */
/* it has different meaning now */
p .class_name {

}

WARNING

Space matters in selector. For best practice, you should never leave spaces among combinators. See: Recursive child selector

css
/* matches recursive children with class `foo` after a paragraph */
p .foo {

}
/* matches paragraph with class `foo` */
p.foo {

}

Attribute selector ​

css
/* matches to all element have `href` attribute */
[href] {
  color: blue;
}
/* matches to all anchors have `href` attribute */
a[href] {
  color: blue;
}

Exact match ​

css
/* matches all anchors have the exact value */
a[href="foo.com"] {
}

Contains operator ​

css
/* matches all anchors contains the value */
a[href*="foo"] {
  color: blue;
}

Starts-with operator ​

css
/* matches all anchors starts with the value */
a[href^="https"] {
  color: blue;
}

Ends-with operator ​

css
/* matches all anchors ends with the value */
a[href$=".com"] {
  color: blue;
}

Pattern composition ​

One can combine different patterns:

css
[href$=".com"][href^="https"] {

}

Relational selector ​

NOTE

The order of elements is from top to bottom.

TIP

Use * to represent an all pattern

Recursive children selector ​

Use a space to represent recursive children selection.

Synopsis: <parent_pattern> <child_pattern> {}

css
/* matches to all anchors of paragraph recursively */
p a {

}

NOTE

Children mean they're in deeper nested levels.

Direct children selector ​

Use > to represent direct children selection.

Synopsis: <parent_pattern> > <child_pattern> {}

css
/* matches to all first level anchors under a paragraph */
p>a {

}

Adjacent sibling selector ​

Use + to represent a direct neighbor of certain pattern.

Synopsis: <parent_pattern> + <child_pattern> {}

css
/* matches a achor right after paragraph */
p+a {

}
html
<p>foo</p>
<a></a> <!-- matched! --> <!-- [!code highlight]  -->
<a></a> <!-- not matched --> <!-- [!code error]  -->

NOTE

Neighbor or sibling means they're in a same level.

General sibling selector ​

Use ~ to represent a direct neighbor of certain pattern.

Synopsis: <parent_pattern> ~ <child_pattern> {}

css
/* matches all achors right after paragraph */
p~a {

}
html
<p>foo</p>
<a></a> <!-- matched! --> <!-- [!code highlight]  -->
<a></a> <!-- matched! --> <!-- [!code highlight]  -->

Pseudo class ​

Pseudo classes are some built in classes from css for selecting in some trivial scenarios. The semantic is the same as class selector, to be applied on a element itself.

NOTE

Pseudo classes starts with :, can be used as a single pattern too just like ..

First/Last child ​

  • :first-child: selects first direct child of a parent. A child version of +.
  • :first-of-type: selects first children of a parent having the distinct tag name.
html
<head>
    <style>
        p :first-child {
          font-style: bold;
        }
        div :first-of-type {

        }
    </style>
</head>
<body>
    <p>
        <a></a> <!-- first direct child can be matched --> <!-- [!code highlight]  -->
        <a></a> <!-- nah --> <!-- [!code error]  -->
    </p>
    <div>
        <a></a> <!-- matched --> <!-- [!code highlight]  -->
        <p></p> <!-- matched --> <!-- [!code highlight]  -->
    </div>
</body>

NOTE

Same for last-child and last-of-type.

Nth-child ​

:nth-child matches by order, commonly used in table and list elements. It accepts a expression of n starting with 0 by 1 step.

html
<head>
  <style>
    ul li:nth-child(odd) {} /* matches items with odd order */
    ul li:nth-child(2n+1) {} /* equivalent to odd */
    ul li:nth-child(even) {} /* matches items with even order */
    ul li:nth-child(2n) {} /* equivalent to even */
    ul li:nth-child(2) {} /* 2nd item */
    ul li:nth-child(-n+1) {} /* can be negative */
  </style>
</head>
<body>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</body>

Others ​

css
:hover {} /* when cursor hover */
a:visited {} /* when a link has been visited */
a:link {} /* link before visited */
:focus {} /* when focused by <Tab> */

Pseudo element ​

Pseudo elements starts with ::, instead of targeting an element, they can be applied to part of the content of an element. So the part of the content can be styled just like an element but not actually an element.

html
<head>
  <style>
    p::first-letter { /* [!code highlight]  */
        font-weight: bold;
    }
    p::first-line { /* [!code highlight]  */
        font-size: 120%; /* scale font size for each firstline of a paragraph */
    }
    ::selection { /* [!code highlight]  */
        background-color: pink; /* set selection background to pink */
    }
    #foo::after { /* insert content after the element content */ /* [!code highlight]  */
        content: "$";
    }
    #foo::before { /* insert content before the element content but with a new line */ /* [!code highlight]  */
        content: "^";
        display: block;
    }
  </style>
</head>
<body>
  <p>foo</p> <!-- `f` should be bold --> <!-- [!code highlight]  -->
  <p id="foo">foo</p> <!-- should be `^foo\n$` and `f` should be bold --> <!-- [!code highlight]  -->
</body>

Multiple target ​

css
p>a, div[href="foo"]+span, article:first-child {

}

Style priority ​

CSS is cascading, and with different specificity. So, the priority of a css style depends on

  • The order of the rule. The previously defined rules can be overridden by rule targets the same after them.
  • The specificity of the selector. Id > class/attribute > tag relations

NOTE

CSS styles get merged when they targets to a same element, members of the one has higher specificity will be kept.

html
<html lang="en">
  <head>
    <style>
      #foo { /* [!code highlight]  */
        color: pink; /* [!code highlight]  */
      } /* [!code highlight]  */
      .foo { /* [!code highlight]  */
        color: yellow; /* [!code highlight]  */
        font-style: italic;
      } /* [!code highlight]  */
    </style>
  </head>

  <body>
    <div>
      <p id="foo" class="foo"> <!-- [!code highlight]  -->
        It's pink because id is more specific <!-- [!code highlight]  -->
        It's also italic. <!-- [!code highlight]  -->
      </p> <!-- [!code highlight]  -->
    </div>
  </body>
</html>

Force as the highest priority ​

!important declaration in CSS forces a style to take the highest priority.

html
 <html lang="en">
  <head>
    <style>
      #foo { 
        color: pink; 
      } 
      .foo { 
        color: yellow !important;   /* [!code ++]  */
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <div>
      <p id="foo" class="foo"> <!-- [!code highlight]  -->
        Now it's yellow. <!-- [!code ++]  -->
      </p> <!-- [!code highlight]  -->
    </div>
  </body>
</html>

Style inheritance ​

Some styles of an element are inherited from its parent by default, some are not.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p { /* [!code highlight]  */
        color: pink; /* [!code highlight]  */
        border: 1px solid black; /* [!code highlight]  */
      } /* [!code highlight]  */
    </style>
  </head>
  <body>
    <div>
      <p>foo is pink; <em>bar</em> is also pink</p> <!-- bar has no border since it doesn't make sense  --> <!-- [!code highlight]  -->
    </div>
  </body>
</html>

There's some builtin variables to perform style rewrite/overriding.

  • initial: use the original style of the element.
  • inherite: force inheritance from parent.
Copyright © 2023-present @sharpchen
Powered by VitePress - 1.3.3