Scribd Logo
Upload

Welcome to Scribd!

  • Combinators (Kombinatorla20combinators20 (Kombinatorlar)

    Uploaded by

    Dilshodbek Ruzibaev
    17 views5 pages
    The document discusses HTML combinators, which are special symbols that indicate the relationship between selectors. There are four main types of combinators: descendant selectors, which select all elements that are descendants of another element; child selectors, which select only child elements; adjacent sibling selectors, which select the next sibling element; and general sibling selectors, which select all sibling elements. Examples of each type of combinator and how they can be used in CSS are provided.

    Original Description:

    Original Title

    8. Combinators (Kombinatorla20combinators20(Kombinatorlar)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses HTML combinators, which are special symbols that indicate the relationship between selectors. There are four main types of combinators: descendant selectors, which select all elements that are descendants of another element; child selectors, which select only child elements; adjacent sibling selectors, which select the next sibling element; and general sibling selectors, which select all sibling elements. Examples of each type of combinator and how they can be used in CSS are provided.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    17 views5 pages

    Combinators (Kombinatorla20combinators20 (Kombinatorlar)

    Uploaded by

    Dilshodbek Ruzibaev
    The document discusses HTML combinators, which are special symbols that indicate the relationship between selectors. There are four main types of combinators: descendant selectors, which select all elements that are descendants of another element; child selectors, which select only child elements; adjacent sibling selectors, which select the next sibling element; and general sibling selectors, which select all sibling elements. Examples of each type of combinator and how they can be used in CSS are provided.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    ✅

    8. Combinators (Kombinatorlar)
    Reja:
    HTML Tree Shajara)

    Oila shajarasi

    HTML shajarasi
    Kod

    <body>

    <div id="content">
    <h1>Sarlavha</h1>
    <p>Paragraph 1</p>
    <p>
    <em>Paragraph 2</em>
    </p>
    <hr>
    </div>

    8. Combinators Kombinatorlar) 1
    <div id="nav">
    <ul>
    <li>Ro'yhat elementi 1</li>
    <li>Ro'yhat elementi 2</li>
    <li>Ro'yhat elementi 3</li>
    </ul>
    </div>

    </body>

    Shajara shaklida

    Combinators

    💡 Combinators Kombinatorlar) - "selector"lar orasidagi munosabatni


    (bog'liqlik) ko'rsatib beradigan maxsus simvollar

    Turlari

    Descendant selector (avlod selektori)

    ❗ Descendant selector - belgilangan elementning avlodlari bo'lgan


    barcha elementlarni tanlab oladi

    <style>
    div p {
    background-color: yellow;
    }
    </style>
    -----------------------------

    8. Combinators Kombinatorlar) 2
    <body>
    <h2>Avlod selektori</h2>
    <p>Belgilangan elementning avlodlari bo'lgan barcha elementlarni tanlab oladi</p>

    <div>
    <p>Paragraph 1: "div"ni ichida.</p>
    <p>Paragraph 2: "div"ni ichida.</p>
    <section>
    <p>Paragraph 3: "div"ni ichida.</p>
    </section>
    </div>

    <p>Paragraph 4: "div"ni ichida emas.</p>


    <p>Paragraph 5: "div"ni ichida emas.</p>
    </body>

    Child selector (farzand selektori)

    ❗ Child selector - belgilangan elementning farzandlari bo'lgan barcha


    elementlarni tanlaydi.

    <style>
    div > p {
    background-color: yellow;
    }
    </style>
    -----------------------------
    <body>
    <h2>Farzand selektori</h2>
    <p>Belgilangan elementning avlodlari bo'lgan barcha elementlarni tanlab oladi</p>

    <div>
    <p>Paragraph 1: "div"ni ichida.</p>
    <p>Paragraph 2: "div"ni ichida.</p>
    <section>
    <p>Paragraph 3: "div"ni ichida.</p>
    </section>
    <p>Paragraph 4: "div"ni ichida.</p>
    </div>

    <p>Paragraph 5: "div"ni ichida emas.</p>


    <p>Paragraph 6: "div"ni ichida emas.</p>
    </body>

    Adjacent sibling selector (qo'shni qardosh selektori)

    8. Combinators Kombinatorlar) 3
    ❗ Adjacent sibling selector - bir elementga yon qo'shni bo'lgan
    boshqa elementni tanlash uchun ishlatiladi.

    <style>
    div + p {
    background-color: yellow;
    }
    </style>
    -----------------------------
    <body>

    <h2>Yon qo'shni qardosh selektori</h2>

    <p>Bir elementga qo'shni bo'lgan boshqa elementni tanlash uchun ishlatiladi</p>

    <div>
    <p>Paragraph 1: "div"ni ichida.</p>
    <p>Paragraph 2: "div"ni ichida.</p>
    </div>

    <p>Paragraph 3: "div"dan keyin.</p>


    <p>Paragraph 4: "div"dan keyin.</p>

    <div>
    <p>Paragraph 5: "div"ni ichida.</p>
    <p>Paragraph 6: "div"ni ichida.</p>
    </div>

    <p>Paragraph 7: "div"dan keyin.</p>


    <p>Paragraph 8: "div"dan keyin.</p>

    </body>

    General sibling selector (umumiy qardosh selektori)

    ❗ General sibling selector - bir elementga qo'shni bo'lgan barcha


    elementlarni tanlash uchun ishlatiladi.

    <style>
    div ~ p {
    background-color: yellow;
    }
    </style>
    -----------------------------
    <body>

    <h2>Umumiy qardosh selektori</h2>


    <p>Bir elementga qo'shni bo'lgan barcha elementlarni tanlash uchun ishlatiladi</p>

    8. Combinators Kombinatorlar) 4
    <p>Paragraph 1: "div"ni ichida emas.</p>

    <div>
    <p>Paragraph 2: "div"ni ichida.</p>
    </div>

    <p>Paragraph 3: "div"dan keyin.</p>


    <h2>Qandaydir sarlavha</h2>
    <p>Paragraph 4: "div"dan keyin.</p>

    </body>

    Reference:
    https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2019Q3/family-tree-
    chart/genealogy-chart-example.png

    http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html

    8. Combinators Kombinatorlar) 5

    You might also like