diff options
Diffstat (limited to 'files/ar/learn/css/building_blocks/selectors/index.html')
| -rw-r--r-- | files/ar/learn/css/building_blocks/selectors/index.html | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/files/ar/learn/css/building_blocks/selectors/index.html b/files/ar/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..9bc86d8abc --- /dev/null +++ b/files/ar/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: CSS selectors +slug: Learn/CSS/Building_blocks/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">In {{Glossary("CSS")}}, selectors are used to target the {{glossary("HTML")}} elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn how CSS selectors work in detail.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_selector">What is a selector?</h2> + +<p>You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the <em>subject of the selector</em>.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as <code>h1</code>, or a class such as <code>.special</code>.</p> + +<p>In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, which is a mature specification, therefore you will find excellent browser support for these selectors.</p> + +<h2 id="Selector_lists">Selector lists</h2> + +<p>If you have more than one thing which uses the same CSS then the individual selectors can be combined into a <em>selector list</em> so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an <code>h1</code> and also a class of <code>.special</code>, I could write this as two separate rules.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>I could also combine these into a selector list, by adding a comma between them.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>When you group selectors in this way, if any selector is invalid the whole rule will be ignored.</p> + +<p>In the following example, the invalid class selector rule will be ignored, whereas the <code>h1</code> would still be styled.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>When combined however, neither the <code>h1</code> nor the class will be styled as the entire rule is deemed invalid.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Types_of_selectors">Types of selectors</h2> + +<p>There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.</p> + +<h3 id="Type_class_and_ID_selectors">Type, class, and ID selectors</h3> + +<p>This group includes selectors that target an HTML element such as an <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>It also includes selectors which target a class:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>or, an ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Attribute_selectors">Attribute selectors</h3> + +<p>This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Or even make a selection based on the presence of an attribute with a particular value:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</h3> + +<p>This group of selectors includes pseudo-classes, which style certain states of an element. The <code>:hover</code> pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, <code>::first-line</code> always selects the first line of text inside an element (a <code><p></code> in the below case), acting as if a <code><span></code> was wrapped around the first formatted line and then selected.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinators">Combinators</h3> + +<p>The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of <code><article></code> elements using the child combinator (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Next_steps">Next steps</h2> + +<p>You can take a look at the reference table of selectors below for direct links to the various types of selectors in this Learn section or on MDN in general, or continue on to start your journey by finding out about <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class, and ID selectors</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Reference_table_of_selectors">Reference table of selectors</h2> + +<p>The below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. I have also included a link to the MDN page for each selector where you can check browser support information. You can use this as a reference to come back to when you need to look up selectors later in the material, or as you experiment with CSS generally.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Example</th> + <th scope="col">Learn CSS tutorial</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">id selector</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Child combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">General sibling</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> |