1 files changed, 179 insertions, 0 deletions
diff --git a/files/ar/web/css/reference/index.html b/files/ar/web/css/reference/index.html
new file mode 100644
index 0000000000..e0d134fb04
--- /dev/null
+++ b/files/ar/web/css/reference/index.html
@@ -0,0 +1,179 @@
+---
+title: CSS reference
+slug: Web/CSS/Reference
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Use this <strong>CSS reference</strong> to browse an <a href="#Keyword_index">alphabetical index</a> of all the standard <a href="/en-US/docs/Web/CSS">CSS</a> properties, <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>, and <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. You can also browse a list of all the CSS <a href="#Selectors">selectors organized by type</a> and a list of <a href="#Concepts">key CSS concepts</a>. Also included is a brief <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM reference</a>.</p>
+
+<h2 id="Basic_rule_syntax">Basic rule syntax</h2>
+
+<h3 id="Style_rule_syntax">Style rule syntax</h3>
+
+<pre class="syntaxbox"><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"><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 <a href="#Selectors"><em>selector</em></a>, <a href="#Pseudo-classes"><em>pseudo-class</em></a>, <em><a href="#Pseudo-elements">pseudo-element</a></em> lists 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">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS 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="Simple_selectors">Simple selectors</h3>
+
+<p><strong>Simple 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/Type_selectors">Type selector</a> <code>elementname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li>
+ <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/Attribute_selectors">Attribute selectors</a> <code>[attr=value]</code></li>
+</ul>
+
+<h3 id="Combinators">Combinators</h3>
+
+<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code>A + B</code></dt>
+ <dd>Specifies that the elements selected by both <code>A</code> and <code>B</code> have the same parent and that the element selected by <code>B</code> immediately follows the element selected by <code>A</code> horizontally.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code>A ~ B</code></dt>
+ <dd>Specifies that the elements selected by both <code>A</code> and <code>B</code> share the same parent and that the element selected by <code>A</code> comes before—but not necessarilyl immediately before—the element selected by <code>B</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code>A &gt; B</code></dt>
+ <dd>Specifies that the element selected by <code>B</code> is the direct child of the element selected by <code>A</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code>A B</code></dt>
+ <dd>Specifies that the element selected by <code>B</code> is a descendant of the element selected by A, but is not necessarily a direct child.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code>A || B</code> {{Experimental_Inline}}</dt>
+ <dd>Specifies that the element selected by <code>B</code> is located within the table column specified by <code>A</code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd>
+</dl>
+
+<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-classes", "index")}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/en-US/docs/Web/CSS/Pseudo-elements", "index")}}</li>
+</ul>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>See also:</strong> A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</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>