1 files changed, 185 insertions, 0 deletions
diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html
new file mode 100644
index 0000000000..7609391ca5
--- /dev/null
+++ b/files/id/web/css/referensi/index.html
@@ -0,0 +1,185 @@
+---
+title: Referensi CSS
+slug: Web/CSS/referensi
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Gunakan <strong>referensi CSS </strong>ini untuk menelusuri indeks alfabetikal dari semua properti <a href="/id/docs/web/CSS">CSS</a> umum, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, dan <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. Anda juga dapat menulusuri <a href="/en-US/docs/Web/CSS#concepts">konsep dasar</a> and a list of <a href="/en-US/docs/Web/CSS/Reference#selectors">selektor berdasarkan jenis</a>. Juga ada <a href="#DOM-CSS_CSSOM">referensi DOM-CSS / CSSOM</a>.</p>
+
+<h2 id="Basic_rule_syntax">Basic rule syntax</h2>
+
+<h3 id="Style_rule_syntax">Style rule syntax</h3>
+
+<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong>
+    <var>selectors-list</var> <strong>{</strong>
+      <var>properties-list</var>
+    <strong>}</strong>
+</pre>
+
+<p>... where :</p>
+
+<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong>
+    <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>]
+    [<strong>,</strong> <var>selectors-list</var>]
+
+<var>properties-list</var> <strong>::=</strong>
+    [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>]
+</pre>
+
+<p>See the index of <a href="#Selectors"><em>selectors</em></a>, <a href="#Pseudo"><em>pseudo-classes</em></a>, and <em><a href="#Pseudo">pseudo-elements</a></em> below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p>
+
+<h4 id="Style_rule_examples">Style rule examples</h4>
+
+<pre class="brush: css notranslate">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>For a beginner-level introduction to the syntax of selectors, see our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guide on CSS Selectors</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<h3 id="At-rule_syntax">At-rule syntax</h3>
+
+<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors">Selectors</h2>
+
+<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p>
+
+<h3 id="Basic_selectors">Basic selectors</h3>
+
+<p><strong>Basic selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code><var>elementname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.<var>classname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#<var>idname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[<var>attr</var>=<var>value</var>]</code></li>
+</ul>
+
+<h3 id="Grouping_selectors">Grouping selectors</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a> <code><var>A</var>, <var>B</var></code></dt>
+ <dd>Specifies that both <code><var>A</var></code> and <code><var>B</var></code> elements are selected. This is a grouping method to select several matching elements.</dd>
+</dl>
+
+<h3 id="Combinators">Combinators</h3>
+
+<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "<code><var>A</var></code> is a child of <code><var>B</var></code>" or "<code><var>A</var></code> is adjacent to <code><var>B</var></code>."</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code><var>A</var> + <var>B</var></code></dt>
+ <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> have the same parent and that the element selected by <code><var>B</var></code> immediately follows the element selected by <code><var>A</var></code> horizontally.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code><var>A</var> ~ <var>B</var></code></dt>
+ <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> share the same parent and that the element selected by <code><var>A</var></code> comes before—but not necessarily immediately before—the element selected by <code><var>B</var></code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code><var>A</var> &gt; <var>B</var></code></dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is the direct child of the element selected by <code><var>A</var></code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code><var>A</var> <var>B</var></code></dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is a descendant of the element selected by <code><var>A</var></code>, but is not necessarily a direct child.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is located within the table column specified by <code><var>A</var></code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd>
+</dl>
+
+<h3 id="Pseudo">Pseudo</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a> <code>:</code></dt>
+ <dd>Specifies a special state of the selected element(s).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a> <code>::</code></dt>
+ <dd>Represents entities that are not included in HTML.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>See also:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntax_and_semantics">Syntax and semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Major_object_types">Major object types</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector &amp; style)</span></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="Important_methods">Important methods</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li>
+</ul>
+
+<h2 id="External_Links">External Links</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/CSS/#indices">CSS Indices (w3.org)</a></li>
+</ul>