Опубликовано Оставить комментарий

CSS Selectors

star symbol

* {
 margin: 0;
}
#container * {
 border: 1px solid black;
}
#container {
   width: 960px;
   margin: auto;
}
.error {
  color: red;
}
a { color: red; }
ul { margin-left: 0; }
li a {
  text-decoration: none;
}
ul + p {
   color: red;
}
div#container > ul {
  border: 1px solid black;
}
ul ~ p {
   color: red;
}
a[title] {
   color: green;
}
a[href="https://vahro.ru"] {
  color: #83b348; /* Envato green */
}
a[href*="vahro"] {
  color: #83b348; /* Envato green */
}
a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}
a[href$=".jpg"] {
   color: red;
}
a[data-filetype="image"] {
   color: red;
}
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}
a[data-filetype="image"] {
   color: red;
}
a[data-info~="external"] {
   color: red;
}
 
a[data-info~="image"] {
   border: 1px solid black;
}
a:link { color: red; }
a:visited { color: purple; }
input[type=radio]:checked {
   border: 1px solid black;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}
div:hover {
  background: #e3e3e3;
}
div:not(#container) {
   color: blue;
}
*:not(p) {
  color: green;
}
p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}
p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}
li:nth-child(3) {
   color: red;
}

The 30 CSS Selectors You Must Memorize – https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

Типы CSS селекторов – https://wp-kama.ru/note/tipy-css-selektorov

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *