CSS - Selector reference

0 votes
199 views
added Jul 18, 2018 in CSS by LC Marshal Captain (25,790 points)
/*select !1 element === 2, 3, 4*/
.newlaunch-news .news-meta span+span {
}
 
/*Clear the 4th element*/
@media screen and (min-width: 992px){
 .vpex-list-col:nth-child(4n+1){
   clear:both;
}
 
/*Choose not on the last-child :before*/
li {
  &:not(:last-child):before {
 
/*Not on the last-child*/
li { 
  &:not(:last-child) {
    padding-right: 16px;
  }
}
 
/*add overlay on last items*/
&:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  z-index: 9;
}
 
/*nth-child pseudo*/
/*to select every 2nd column in a row*/
li:nth-child(2n){
  background: pink;   
}
  
/*to choose first 4 in every columns*/
li:nth-child(4n-7) {  /* or 4n+1 */
  color: #ff3399;   
}
  
/*Select the first 4 li*/
li:nth-child(-n+4) {
  color: #ff3399; 
}
  
  
/*Select li starting from 4th*/
li:nth-child(n+4) {
  color: #ff3399; 
}
  
/*Select 4th li*/
li:nth-child(4) {
  color: #ff3399; 
}
  
/*Select odd/even li*/
li:nth-child(odd) { /* nth-child(even) */
  color: #ff3399;   
}
  
/*Select the last li*/
li:nth-last-child{
  color: #ff3399; 
}
  
/*Select the first li*/
li:nth-first-child{
  color: #ff3399; 
}
  
/*Select 2nd last li*/
li:nth-last-child(2) {
  color: #ff3399; 
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...