initial commit

2 files changed, 218 insertions, 0 deletions

diff --git a/files/id/web/css/css_selectors/index.html b/files/id/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..8bf3fb0034
--- /dev/null
+++ b/files/id/web/css/css_selectors/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - CSS Selectors
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - Selectors
+  - TopicStub
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Selectors</strong> define to which elements a set of CSS rules apply.</p>
+
+<h2 id="Dasar_Selektor">Dasar Selektor</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (Jenis-Jenis Seleksi)</dt>
+ <dd>Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.<br>
+ <strong>Syntax:</strong> <code><var>eltname</var></code><br>
+ <strong>Example:</strong> <font face="Consolas, Liberation Mono, Courier, monospace">Input akan menampilkan sebuah elemen </font> {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (Selektor Class)</dt>
+ <dd>Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.<br>
+ <strong>Syntax:</strong> <code>.<var>classname</var></code><br>
+ <strong>Example:</strong> <code>.index</code> akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut <code>class="index"</code> atau yang serupa).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (selektor ID)</dt>
+ <dd>Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.<br>
+ <strong>Syntax:</strong> <code>#<var>idname</var></code><br>
+ <strong>Example:</strong> <code>#toc</code> akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut <code>id="toc"</code> atau yang serupa).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a> (selektor seluruhnya)</dt>
+ <dd>Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan  dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.<br>
+ <strong>Syntax:</strong> <code>* ns|* *|*</code><br>
+ <strong>Example:</strong> <code>*</code> akan menampilkan seluruh elemen dari dokumen.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> (selektor attribut)</dt>
+ <dd>Dasar selektor ini memilih nodes (cabangan)  didasarkan pada sebuah nilai dari atributnya.<br>
+ <strong>Syntax:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Example:</strong> <code>[autoplay]</code> akan menampilkan seluruh elemen yang mempunyai attribut <code>autoplay</code> pengaturan (pada sebuah nilai).</dd>
+</dl>
+
+<h2 id="Combinators">Combinators</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a></dt>
+ <dd>The <code>'+'</code> combinator selects nodes that immediately follow the former specified element.<br>
+ <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Example:</strong> <code>ul + li</code> will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></dt>
+ <dd>The <code>'~'</code> combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.<br>
+ <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a></dt>
+ <dd>The <code>'&gt;'</code> combinator selects nodes that are direct children of the former specified element.<br>
+ <strong>Syntax:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Example:</strong> <code>ul &gt; li</code> will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a></dt>
+ <dd>The <code>' '</code> combinator selects nodes that are children (not necessary direct children) of the former specified element.<br>
+ <strong>Syntax:</strong> <code>A B</code><br>
+ <strong>Example:</strong> <code>div span</code> will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.</dd>
+</dl>
+
+<h2 id="Pseudo-elements">Pseudo-elements</h2>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.</p>
+
+<h2 id="Pseudo-classes">Pseudo-classes</h2>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.5</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..9ec7339a95
--- /dev/null
+++ b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Using the :target pseudo-class in selectors'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p>
+
+<p>Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> mengenalkan <strong>{{ Cssxref(":target") }} </strong><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">Penentuan Sebuah Target</h3>
+
+<p>pseudo-class<code> {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada </code>URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example berisi bagian bagian pengidentifikasi #Example. Dalam HTML, pengidentifikasi ditemukan sebagai nilai dari masing masing id atau nama attribut, sejak keduanya membagi namespace (kelompok id atau nama) yang sama. Dengan begitu, contoh URI akan menunjukkan kop "Example" dalam dokumen ini.</span>  </code></p>
+
+<p>Misalkan kamu berharap untuk menampilkan sebuah elemen h2 yang merupakan target sebuah URI, tetapi tidak menginginkan sesuatu jenis dari elemen lainnya untuk menemukan sebuah target tampilan. Ini cukup menyederhakan:</p>
+
+<pre>h2:target {font-weight: bold;}
+</pre>
+
+<p>Ini juga memungkinkan untuk membuat tampilan yang spesifik dari sebuah bagian bagian terkecil sebuah dokumen. Ini dilakukan menggunakan identifikasi nilai yang menemukan URI didalamnya. Dengan begitu, untuk menambahkan sebuah border pada #Example terpisah, kita dapat menuliskannya dengan:</p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Menargetkan Seluruh Elemen</h3>
+
+<p>Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">Contoh</h3>
+
+<p>Berikut contoh, ada lima poin tautan elemen dalam dokumen yang sama. Menyeleksi link "First", sebagai contoh, akan menyebabkan &lt;h1 id="one"&gt; menjadi target elemen. Catatan bahwa dokumen boleh melompat pada sebuah scroll posisi baru, selama target elemen ditempatkan pada posisi atas dari jendela browser jika memungkinkan. </p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">Kesimpulan</h3>
+
+<p>Dalam kasus dimana sebuah pengidentifikasi poin bagian bagian dari sebuah bagian dokumen, para pembaca bisa jadi dibingungkan tentang yang mana bagian dari dokumen yang mereka anggap untuk dapat dibaca (diseleksi). Dengan gaya target sebuah URI, kebingungan pembaca dapat dikurangi atau dihilangkan. </p>
+
+<h3 id="Related_Links" name="Related_Links">Related Links</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>