CSS tricks selector practices part 1

by Shoaib Chikate

HTML

<p class="centered">1) :after and :before creating pseudoelement</p>
<div class="example">
<ul class="city-list">
    <li> Hyderabad</li>
    <li> Mumbai</li>
    <li> Pune</li>
</ul>
</div>

<p class="centered">2) adjacent sibilings (p + p)</p>

<div class="example">
<div>
  <p>I'm a paragraph</p>
  <p>I get selected!</p>
</div>

<div>
  <p>I'm a paragraph</p>
  <h2>As I am in between next p tag will not get selected.</h2>
  <p>I will NOT get selected</p>
</div>
    
</div>

<p class="centered">3) :checked</p>
<div class="example">
    <input type="checkbox" id="example"/>
    <label for="example"> After checking my color changes.</label>
 </div>

<p class="centered">4) Child -It means "select elements that are direct descendants only" For e.g: ul > li</p>

<div class="example">
    <ul class="parent">
        <li>I will get selected</li>
        <li>I will get selected</li>
        <ul>
            <li>I will not get selected</li>
            <li>I will not get selected</li>
        </ul>
        <li>I will get selected</li>
        
    </ul>
 </div>

<p class="centered">5) :disabled</p>
<div class="example">
    <input type="checkbox" id="example" disabled="disabled"/>
    <label for="example">Checked box is disabled.</label>
 </div>

<p class="centered">6)Descendant:
    <span><strong>Descendant</strong> means anywhere nested within it in the DOM tree. Could be a direct child, could be five levels deep, it is still a descendant. 
        <br/>For example div p{}</span>
</p>

<div class="example">
    <div id="descendent">
        <h3>I am descendent</h3>
        <span>Although I am inside span
            <h3>But still I am descendent
                
            </h3>
        </span>
    </div>
 </div>

<p class="centered">7) :first-letter</p>

<div class="example">
<p id="capitalized">
    shoaib sajeed chikate works in semanticbits india pvt ltd
</p>
</div>

<p class="centered">8) :first-child and last-child</p>

<div class="example">
<ul id="city">
   ...

CSS

.example{
     border:2px solid;
    border-radius:6px;
    }
.example:before{
    content:"Example:";
    font-size:20px;
    color:red;
    
}

.centered{
    text-align:center;
    border-top:1px solid;
    font-size:28px;
}

.centered:first-child{
    border-top:0;
}
/*after and before creating pseudoelemet*/

ul.city-list{
list-style-type:none;    
}

ul.city-list li:before{
content:url('https://mybinja.com/dev/wp-content/uploads/2014/03/binja_favicon.png');
}

ul li:hover:before {
-webkit-animation:2s linear 0s normal none infinite spin;
   -moz-animation:2s linear 0s normal none infinite spin;
    -ms-animation:2s linear 0s normal none infinite spin;
     -o-animation:2s linear 0s normal none infinite spin;
        animation:2s linear 0s normal none infinite spin;

}

/*adjacent siblings*/
p + p {
  color:red;
  text-transform:uppercase;
}

/* :checked*/
input[type="checkbox"] +label{
    color:grey;
}
input[type="checkbox"]:checked +label{
    color:red;
}
/*child*/
ul.parent > li{
    color:green;
    text-transform:uppercase;
} 

/*:disabled*/
input[type="checkbox"]:disabled +label{
    border:1px solid green;

    padding:10px;
}

/*descendent*/
#descendent h3{
    color:red;
    letter-spacing:3px;
    
}

/*capitalized*/
#capitalized::first-letter{
    color:green;
    font-weight:400;
    text-transform:uppercase;
    font-size:30px;
}

/*first child and last child*/
#city li:first-child{
    color:green;
    list-style-type:none;
}
#city li:first-child:before{
    content:'Current City: ';
    font-weight:400;
    color:red;
}

#city li:last-child{
    color:purple;
    list-style-type:none;
}
#city li:last-child:before{
    content:'Permanent City: ';
    font-weight:400;
    color:blue;
}

/*first-of-type and last-of-type*/
#subjects h3:first-of-type{
    color:green;
}

#subjects h3:last-of-type{
    color:red;
}

input[type="text"]:focus{
    width:340px;
    background-color:pink;
}