CSS tricks selector practices part 2

by Shoaib Chikate

HTML

<p class="centered">11) General sibling</p>
<div class="example">
    <span class="study">Span is class and its immediate sibling is p </span>
    <p>But by using this selector(~) whenever h3 will come,it will have CSS effect.</p>
    <h3>Hurray , I got selected</h3>
    <span>
    <h3>I will not because I m not after class study</h3>
    </span>
    <h3>I will also get selected as I follow after class study.</h3>
</div>


<p class="centered">12) :hover</p>
<div class="example">
    <a href="#">Go to google</a>
</div>

<p class="centered">13) :in-range and out-of-range</p>
<div class="example">
    <input type="number" max="50" min="5"/>
</div>

<p class="centered">14) :invalid and :valid</p>
<div class="example">
    <input type="email" required="required"/>
</div>

<p class="centered">15) :matches()</p>
<div class="example">
    <div id="matcher">
        <p>Matched</p>
        <h1>Not</h1>
        <h2>Matched</h2>
        <h3>Not</h3>
    </div>
</div>

<p class="centered">16) :not(X) where X is any selector</p>
<div class="example">
    <div id="not-selector">
        <p>Matched</p>
        <p>Matched</h1>
        <p class="doNotSelect">Not Matched</h2>
        <p>Matched</h3>
    </div>
</div>

<p class="centered">17) nth-child() and nth-last-child</p>

<section class="grid example">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

<p class="centered">18) nth-of-type and nth-last-of-type</p>

<section class="list example">
    <h1> Lists starts now</h1>
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
    <h1> Lists ends now</h1>
</section>

<p class="centered">19) :only-child</p>
<div class="example">
 <div>
  <p>This paragraph is the only child of its parent</p>
</div>
 
<div>
  <p>This paragraph is the first...

CSS

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


.centered:first-child{
    border-top:0;
}

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

/*general siblings*/
span.study ~ h3{
    color:purple;
}

/*:hover*/
a:hover {
  color: green;
  text-decoration:none;
}

/*:n-range and :out-of-range*/
input[type="number"]:in-range{
    color:green;
}

input[type="number"]:out-of-range{
    color:purple;
}

/*:invalid and :valid*/
input[type="email"]:invalid{
    color:red;
}

input[type="email"]:valid{
    color:green;
}

/*:matches()*/
#matcher :-webkit-any(p, h2){
    color:purple;
}

/*not(X)*/
#not-selector p:not(.doNotSelect){
    color:green;
    font-size:20px;
}

/*nth-child and nth-last-child*/
.grid > .module:nth-child(2n){
    color:purple;
    font-size:28px;
    text-transform:uppercase;
}

.grid > .module:nth-last-child(1){
    color:green;
    font-size:28px;
    text-transform:lowercase;
}

/*nth-of-type and nth-last-of-type*/
.list > article:nth-last-of-type(1){
    background-color:pink;
}

.list > article:nth-of-type(2){
    background-color:yellow;
}

/*:only-child*/
div p:only-child {
    color: red;
}
/*:only-of-type*/
div p:only-of-type {
    color: purple;
}

::-webkit-input-placeholder {
  color: purple;
}
::-moz-placeholder { /* Firefox 19+ */
  color: purple;
}
:-ms-input-placeholder {
  color: purple;
}
:-moz-placeholder { /* Firefox 18- */
  color: purple;
}