CSS: Specificity

Precedence and Priority

Top to Bottom - the last, bottom-most, entries override previous entries with the same or lesser level of specificity.
- div#divTestId will be blue given the following:
```
/* orange */
div#divTestId {
  color: orange;
}

/* Last entry - blue */
div#divTestId {
  color: blue;
}
```
Specificity - more narrowly defined selectors take greater precedence over less narrowly defined ones.
- div#divTestId is more specific than #divTestId although the two semantically refer to the same element.
- Therefore, #divTestId will remain orange given the following:
```
/* More specific - orange */
div#divTestId {
  color: orange;
}

/* blue */
#divTestId {
  color: blue;
}
```
The !important keyword - overrides the standard Precedence and Priority rules described above.
- Elevates the Priority of an Element such that it can only be overridden by another !important CSS value.

Example

<!-- HTML -->
<div id="divTestId" class="divTestClass">
  <p id="pTestIdOne" class="pTestClass">
    text
  </p>
  <p id="pTestIdTwo" class="pTestClass">
    text
  </p>
</div>

/* CSS */

/* blue */
#divTestId {
  color: blue;
}

/* More specific - orange */
div#divTestId {
  color: orange;
}

/* More specific - green */
#divTestId.divTestClass {
  color: green;
}

/* More specific - pink */
div#divTestId.divTestClass {
  color: pink;
}

/* More specific - red */
div#divTestId.divTestClass p {
  color: red;
}

/* More specific - purple */
div#divTestId.divTestClass > p {
  color: purple;
}

/* less specific - purple */
div#divTestId p {
  color: red;
}

/* less specific - purple */
p#pTestIdTwo {
  color: blue;
}

/* more specific - purple and red*/
div#divTestId p#pTestIdTwo {
  color: red;
}

/* most specific - black and red*/
div#divTestId > p.pTestClass#pTestIdOne {
  color: black;
}

Rendered:

text

CSS: Techniques

Remove default padding and margins:

html, body {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
}

Responsive Columns

<!-- HTML -->
<div class="flex-container">
    <div class="item">
        <h5>Example</h5>
    </div>
    <div class="item">
        <h5>Example</h5>
    </div>
        <div class="item">
        <h5>Example</h5>
    </div>
    <div class="item">
        <h5>Example</h5>
    </div>
        <div class="item">
        <h5>Example</h5>
    </div>
    <div class="item">
        <h5>Example</h5>
    </div>
</div>

// SCSS
.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  width: 100%;

  & > .item {
    text-align: center;
    justify-content: center;
    align-content: center;
    width: 30%;
    border: 2px dashed gray;
    border-radius: 15px;
    padding: 5px;
    margin: 5px;
  }
}

Rendered:

Example

Responsive Centering

<div class="wrapper-example">
  <h1>Example</h1>
</div>

div.wrapper-example {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: 100%;
}
div.wrapper-example > h1 {
  text-align: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  border: 3px solid black;
  padding: 15px;
  border-radius: 15px;
}

Rendered:

Example

Scroll

::-webkit-scrollbar {
   width: 10px;
}
::-webkit-scrollbar-track {
  background: crimson;
}
::-webkit-scrollbar-thumb {
  background: orangered;
}
::-webkit-scrollbar-thumb:hover {
  background: orangered;
}

Input Text

<input id="exampleTextInput" type="text" placeholder="placeholder_text" />

input[type="text"]#exampleTextInput {
  width: 600px;
  padding: 20px;
  font-size: 20px;
  border-radius: 25px;
  color: turquoise;
  opacity: .55;
  margin: 15px;
}

input[type="text"]#exampleTextInput:focus {
    opacity: .8;
    outline: none;
}

input[type="text"]#exampleTextInput::placeholder {
  color: gray;
}

Rendered:

Markers

<ol>
  <li class="example">Example</li>
  <li class="example">Example</li>
  <li class="example">Example</li>
</ol>

ol > li.example::marker {
    color: orange;
}

Rendered:

Example
Example
Example

Disable Text Selection

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Old version of Firefox */
    -ms-user-select: none; /* Internet Explorer or Edge */
    user-select: none; /* All modern browsers */
}

Text Backgrounds

<div>
  I am a <span class="text-background">block of text</span>! Hooray me!
</div>
<div>
  I am another <span class="text-only">
  block of text</span>! Hooray <span class="text">again</span>!
</div>
<div>
  I am a last <span class="text-background border">
  block of text</span>! Hooray <span class="text">again</span>!
</div>

div > span.text-background {
  color: white;
  border-radius: 3px;
  border: 0px solid transparent;
  padding: 1.2px 7px 2px 5px;
  margin: 3px 0px;
  background: #b92b27;
  background: -webkit-linear-gradient(to right, #1565c0, #b92b27);
  background: linear-gradient(to right, #1565c0, #b92b27);
  width: fit-content;
}

div > span.text-background.border {
  border-bottom: 3px solid purple;
}

div > span.text-only {
  background: #b92b27;
  background: -webkit-linear-gradient(to right, #1565c0, #b92b27);
  background: linear-gradient(to right, #1565c0, #b92b27);
  /** Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Rendered:

I am a block of text! Hooray me!

I am another block of text! Hooray again!

I am a last block of text! Hooray again!

SVG Optimization

Consult: https://raygun.com/blog/improve-page-load-speed-svg-optimization/

Conditional Selector

div.css-conditional-example:has(> div.css-conditional-example) {
  color: white;
  background-color: black;
}

<div class="css-conditional-example">
  <div class="css-conditional-example">
      Example #1
  </div>

  Example #2
</div>

<div class="css-conditional-example">
    Example #3
</div>

Example #1

Example #2

Example #3

Resources and Links

CSS: Pseudo-Classes

Pseudo-Classes provide additional filtering, querying, and narrowing power to standard Cascading Style Sheet Selectors beyond the innate ability to query for HTML id or class Attributes.

Several Pseudo-Classes involve specifying a distinct state that an Element might find itself in due to a triggering Event. For instance:

:hover - triggered when a user hovers over an Element with their mouse
:focus - triggered when a user clicks into an HTML Input Field

HTML Attribute Querying

Query by HTML Attribute:

[my_attr="my_value"] {
    /* */
}

/* With wildcard - any my_attr value matching my_value */
[my_attr*="my_value"] {
    /* */
}

Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Some Important Pseudo Classes

/* Triggered when a user hovers over an Anchor element */
a:hover {
    /* */
}

/* First child element of an Unordered List - probably a List element */
ul:first-child {
    /* */
}

/* Last child element of an Unordered List - probably a List element */
ul:last-child {
    /* */
}

Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

CSS: Media Queries

Media Queries allow one to specify conditional Cascading Style Sheets, styles, or styling without requiring complicated JavaScript.

It's generally a good idea to place narrower Media Query conditions lower to take precedence over less narrowly defined conditions:

@media (max-width: 1850px) {
  #home {
    transform: scale(.70);
  }
}

@media (max-width: 1550px) {
  #home {
    transform: scale(.48);
  }
}

Examples:

max-height only:

@media (max-height: 850px){
    nav#toc-wrapper > ul#toc {
        height: 425px;
    }
}

max-width only:

@media (max-width: 1850px) {
  .container > h2 {
    font-size: 35px;
  }
}

@media (max-width: 550px) {
  .container > block {
    color: red;
  }
}

@media (max-width: 1050px){
    body>div#dune{display:none}
}

Conjoined conditions with Media Types and Media Features:

@media only screen and (orientation: landscape) and (max-width: 6500px) and (max-height: 600px) {
  .container > h2 {
    color: aqua;
  }
  .container > q {
    color: aqua;
  }
}

@media only screen and (max-width: 1000px) {
  .container > q {
    color: green;
  }
}

Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types for all Media Types and Media Features