“Combinateurs CSS” Réponses codées

Combinateurs CSS

/*Looking inside - Selects all the li elements placed (anywhere) inside the ul;Descendant selector */
ul li

/*Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector*/
ul > li

/* Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector */
ul + ul

/* Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector */
ul ~ ul
Wide-eyed Fox

Combinateurs CSS

There are four different combinators in CSS:

    descendant selector (space)
    child selector (>)
    adjacent sibling selector (+)
    general sibling selector (~)
pra's play

Combinateurs CSS

/* Scroll for HTML part for visualization 
There are four different combinators in CSS:
 Descendant Selector - selects all of specified parent  */
ul li{
    background-color: orange; 
}

/* Child Selector - selects only children */
ul > li{
    background-color: red;
}

/* Adjacent Sibling Selector - selects only the immediate sibling*/
ul + li{
    color: blue;
}

/* General Sibling Selector - selects all the siblingss */
ul ~ li{
    background: yellow;
}

/* Next is the HTML part for the CSS
<body>
    <h2>Combinators CSS</h2>
    <ul>
      <li>Child1</li>

      <ol>
        <li>Descendant1</li>
        <li>Descendant2</li>
      </ol>
      <li>Child2</li>
      <li>Child3</li>
      <li>Child4</li>
    </ul>
    <li>Sibling1</li>
    <li>Sibling2</li>
  </body>
*/
Successful Shark

Combinateurs CSS

div p {
  background-color: yellow;
}
naly moslih

Sélectionneurs Combinators CSS

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }
Friendly Flatworm

Réponses similaires à “Combinateurs CSS”

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel