Day 82/100 Selectors

riocantre

Rio Cantre

Posted on December 6, 2021

Day 82/100 Selectors

In achieving a well-structured project, the design system must have a specific method to render the code efficiently and easier to debug in later updates.

Selector

Type

Some important notes on the type selector:

  • The type selector does not include the angle brackets.
  • Since element types are often referred to by their opening tag name, the type selector is sometimes referred to as the tag name or element selector.

The universal selector selects all elements of any type.
The attribute selector can be used to target HTML elements that already contain attributes.

Code Snippets

<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>

img[src*='winter'] {
  height: 50px;
}

img[src*='summer'] {
  height: 100px;
}

p:hover {
  background-color: lime;
}
Enter fullscreen mode Exit fullscreen mode

a11y myths

Disabled users don't use my website

How can you be so sure? Many people with disabilities like color blindness, limited motor skills, etc. use websites just like other users. Also, many assistive technologies are not detectable in any way.

resource

💖 💪 🙅 🚩
riocantre
Rio Cantre

Posted on December 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Day 87/100 The Box Model
100daysofcode Day 87/100 The Box Model

December 11, 2021

Day 83/100 Visual Rules
100daysofcode Day 83/100 Visual Rules

December 7, 2021

Day 82/100 Selectors
100daysofcode Day 82/100 Selectors

December 6, 2021