SELECTOR DAN SPECIFICITY

Halo semuanya, apa kabar? Semoga sehat-sehat selalu ya, Amiin. 
Pada kesempatan kali ini Kurakuracoding ingin memberikan tutorial perbedaan selector dan specifity
pada css

Jenis Selector

Element Selector 

p {
  margin: 10px 0;
}
h1 {
  font-size: 2rem;
}

Class Selector

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}
.button.primary {
  background-color: #28a745;
}

ID Selector

#header {
  background-color: #343a40;
  color: white;
  padding: 20px;
}

Attribute Selector

input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px;
}
a[href^="https"] {
  color: green;
}
img[alt*="logo"] {
  max-width: 200px;
}

Pseudo-class dan Pseudo-element

/* Pseudo-class */
a:hover {
  color: #ff6b6b;
  text-decoration: none;
}
li:first-child {
  font-weight: bold;
}
input:focus {
  outline: 2px solid #007bff;
}
/* Pseudo-element */
p::first-line {
  font-weight: bold;
}
.quote::before {
  content: '"';
  font-size: 1.5em;
}

Combinator

/* Descendant */
.container p {
  margin-bottom: 1rem;
}
/* Child */
.menu > li {
  display: inline-block;
}
/* Adjacent sibling */
h2 + p {
  margin-top: 0;
}
/* General sibling */
h2 ~ p {
  color: #666;
}

Specificity

/* Specificity: 0,0,0,1 */
p {
  color: black;
}
/* Specificity: 0,0,1,0 */
.text {
  color: blue;
}
/* Specificity: 0,1,0,0 */
#content {
  color: red;
}
/* Specificity: 1,0,0,0 */
p {
  color: green !important;
}

Berikut adalah perbedaan antara Selector dan Specificity