FreshOptimz Update v6 (6.40)
Fix: Muncul karakter <!-- tepat dibawah tag <body> yang disebabkan oleh sistem script adsense terbaru
<elemen class='nama-class'>
<div class='redcolor'>Konten</div>
<p class='redcolor'>Konten</p>
<p>Konten</p>
.redcolor {
color:red;
}
Konten
Konten
<b>Tabel 2 kolom</b>
<div class='tabel-like col2'>
<div>Konten 1</div>
<div>Konten 2</div>
<div>Konten 3</div>
<div>Konten 4</div>
</div>
<b>Tabel 4 kolom</b>
<div class='tabel-like col4'>
<div>Konten 1</div>
<div>Konten 2</div>
<div>Konten 3</div>
<div>Konten 4</div>
</div>
.tabel-like {
display:flex;
flex-wrap:wrap;
}
.tabel-like > *{
border:1px solid #000;
box-sizing:border-box;
text-align:center;
}
.tabel-like.col2 > * {
width:50%;
}
.tabel-like.col4 > * {
width:25%;
}
p {
color:blue;
text-decoration:underline;
}
p {
color:red;
}
<p>Paragraf</p>
Paragraf
p {
color:green;
}
p {
color:red!important;
text-decoration:underline;
}
p {
color:blue;
}
<p>Paragraf</p>
Paragraf
p {
color:blue;
text-decoration:underline;
}
.myparagraf {
color:green;
}
<p class='myparagraf' style='color:red'>Paragraf</p>
Paragraf
#myparagraf {
color:red;
text-decoration:underline;
}
.myparagraf {
color:green;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>
Paragraf
.myparagraf {
color:green;
}
#myparagraf {
color:red;
text-decoration:underline;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>
Paragraf
.myparagraf {
color:green;
}
p.myparagraf {
color:red;
}
<p class='myparagraf'>Paragraf</p>
Paragraf
.myparagraf {
color:green;
text-decoration:underline;
}
.myparagraf {
color:red;
}
<p class='myparagraf'>Paragraf</p>
Paragraf
<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<div>Konten</div>
.blue {
color:blue;
}
Konten
Konten
Konten
<h2>Judul</h2>
<p>Konten p1</p>
<div>Konten div</div>
<p>Konten p2</p>
p {
color:blue;
}
Konten p1
Konten p2
<h2>Judul</h2>
<p>Konten p1</p>
<div>Konten div</div>
<p>Konten p2</p>
p {
color:blue;
}
div {
color:red;
}
Konten p1
Konten p2
<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<p>Konten</p>
.blue {
color:blue;
}
Konten
Konten
Konten
<p class='blue'>Konten</p>
<p class='big'>Konten</p>
<p class='blue big'>Konten</p>
<p>Konten</p>
.blue {
color:blue; /* set warna menjadi biru untuk class blue */
}
.big {
font-size:200%; /* set ukuran font menjadi sebesar 200% untuk class big*/
}
.blue.big { /* konfigurasi ini hanya akan diterapkan pada elemen yang memiliki class keduanya, untuk elemen dengan class blue saja atau big saja, konfigurasi tidak akan diterapkan */
text-decoration:underline; /* Memberikan garis bawah untuk class blue big */
}
Konten
Konten
Konten
Konten
<p>Konten 1</p>
<p id='konten2'>Konten 2</p>
<p>Konten 3</p>
#konten2 {
color:blue;
}
Konten 1
Konten 2
Konten 3
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p>Tidak terdapat atribut</p>
[title] {
color:blue;
}
Blogger
blogger
Tidak terdapat atribut
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
[title="Blogger"] {
color:blue;
}
Blogger
blogger
Belajar Blogger
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Bloggers'>Bloggers</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Belajar-Blogger'>Belajar-Blogger</p>
<p title='Blogger-CSS'>Blogger-CSS</p>
[title="Blogger"] {
color:blue;
}
Blogger
blogger
Bloggers
Belajar Blogger
Belajar-Blogger
Blogger-CSS
<p title='Blogger BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas,
apa yang dimaksud dengan "kata" adalah:
- Blogger BelajarBlogger Belajar-Blogger
- Blogger
- BelajarBlogger
- Belajar-Blogger
-->
<p title='BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas,
apa yang dimaksud dengan "kata" adalah:
- BelajarBlogger Belajar-Blogger
- BelajarBlogger
- Belajar-Blogger
-->
<p title='B'>B</p>
<p title='Bc'>Bc</p>
<p title='aB'>aB</p>
<p title='aBc'>aBc</p>
<p title='b'>b</p>
[title*="B"] {
color:blue;
}
B
Bc
aB
aBc
b
<p title='ABC'/>
<!-- Pada atribut "title" diatas,
apa yang dimaksud dengan "text" adalah:
- A
- AB
- ABC
- B
- BC
- C
-->
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger-CSS</p>
<p title='Blogger-CSS'>Blogger-CSS</p>
<p title='BloggerCSS'>Blogger-CSS</p>
[title^="Blogger"] {
color:blue;
}
Blogger
blogger
Belajar Blogger
Blogger CSS
Blogger-CSS
BloggerCSS
<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger CSS</p>
<p title='CSSBlogger'>CSSBlogger</p>
[title$="Blogger"] {
color:blue;
}
Blogger
blogger
Belajar Blogger
Blogger CSS
CSSBlogger
<div>
<div>div-div</div>
<p>div-p</p>
</div>
<p>p</p>
<div>div</div>
* {
color:blue;
}
div > * {
border:2px solid blue;
padding:10px;
margin-bottom:10px;
}
div-p
p
<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>
/* Kofigurasi berikut hanya akan ditepkan pada
elemen "p" yang memiliki class "b" */
p.b {
color:blue;
}
Elemen = p, class = b
Elemen = p, class = b, title = Blogger
<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>
/* Konfigurasi berikut hanya akan diterapkan pada
elemen "p" yang memiliki class "b" dan dengan title "Blogger" */
p.b[title="Blogger"] {
color:blue;
}
Elemen = p, class = b
Elemen = p, class = b, title = Blogger
<div id='mydiv'>
#mydiv
<div>
#mydiv-div
<div>#mydiv-div-div</div>
<div>#mydiv-div-div</div>
</div>
<div>
#div1-div
<div>#mydiv-div-div</div>
<div>#mydiv-div-div</div>
</div>
</div>
<div>div outside #mydiv</div>
#mydiv div {
border:2px solid black;
color:blue;
padding:10px;
margin-bottom:10px;
}
<div id='mydiv'>
#mydiv
<div>
#mydiv-div
<div>#mydiv-div-div</div>
<div>#mydiv-div-div</div>
</div>
<div>
#div1-div
<div>#mydiv-div-div</div>
<div>#mydiv-div-div</div>
</div>
</div>
<div>div outside #mydiv</div>
#mydiv > div {
border:2px solid black;
padding:10px;
margin-bottom:10px;
}
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
<p>p</p>
</div>
<p>p</p>
div ~ p {
color:blue;
}
p
p
p
p
p
p
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
<p>p</p>
</div>
<p>p</p>
div ~ p {
color:blue;
}
p
p
p
p
p
p
div {
color:blue;
}
p {
color:blue;
}
span {
color:blue;
}
.mydiv > * {
color:blue;
}
div, p, span, .mydiv > * {
color:blue;
}
<div id='mydiv'>
<span id='span1'>
<i><!--konten--></i>
<i><!--konten--></i>
</span>
<span id='span2'>
<i><!--konten--></i>
<i><!--konten--></i>
</span>
</div>