css selector

gistfile1.txt

<a href="intihar.pdf">file</a>
<a href="intihar-et.pdf">file</a><a href="bilekler.jpg">file</a>
öl

<p title='en-us'>en us</p>
<p title='tr-tr'>tr tr</p>

<input id='suicide' class='suicide' type='checkbox' /> 
<label for='suicide'>intihar etmek istiyorum</label>

<input class='number' type='number' max='5' />

<input required minlength="50" placeholder='intihar yeri' />

<div class='flag'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<p>ff</p>

<div class="arrow-right">
  
</div>

a{
  display: block;
}

a[href$=pdf]::after{
  content: 'pdf';
}

.arrow-right{
  
  width: 0; 
  height: 0; 
  border-top: 60px solid red;
  border-right: 60px solid green;
}

input:required{
  transition: 3s;
  border: 5px solid #4A148C;
  display: block;
}

input:valid{
  transition: 3s;
  border: 1px solid #33691E;
}

input:invalid{
  border: 15px solid pink;
}

p[title|=en]{
  color: red;
}

.suicide[type=checkbox]:checked+label{
  font-weight: bold;
}

.number:in-range{
  background: green;
}

.number:out-of-range{
  background: red;
}

.flag{
  width: 100%;
  height: 20em;
}

.flag div:nth-of-type(odd){
    width: 100%;
  height: 20em;
  background: red;
}
.flag div:nth-of-type(even){
    width: 100%;
  height: 20em;
  background: white;
}
p:empty{
  height: 5em;
  width: 5em;
  background: blue;
}