در حال بارگزاری ...

استفاده از سلکتورها در CSS

CSS
توسط مریم مهربان
آخرین به روز رسانی شنبه 15 آذر 1399

انتخابگرها جزء جدای ناپذیر کدهای CSS محسوب می‌شوند و همانگونه که از نامش برمی‌آید، برای انتخاب دسته‌ای از اجزاء صفحه استفاده می‌شود.

از سلکتورها، گاهی برای انتخاب دسته‌ای از اجزاء صفحه و اعمال ویژگی‌های ظاهری یکسان به آن‌ها استفاده می‌شود و گاهی برای انتخاب یک جزء خاص. سلکتورها از ویژگی‌هایی همچون id ،class، روابط والد و فرزند یا روابط مجاورت برای انتخاب اجزاء استفاده می‌کنند. در ادامه مقاله در لیداوب درباره انواع سلکتورها در css صحبت خواهیم کرد.

سلکتور نوع در css

این نوع سلکتور که سلکتور تگ نیز نامیده می‌شود، تمام اجزای صفحه را که تگ خاصی دارند، انتخاب می‌کند. نحوه استفاده از این سلکتور به صورت زیر است:

element { css style properties }

در مثال زیر، تمام اجزای صفحه با تگ <p> انتخاب می‌شوند.

p { 
    background-color: lightblue;
}
<body>
<div>
        <p>This is a paragraph with some text in it.</p>
        <div>I'm just one div in between two paragraph tags.</div>
        <p>This is a different paragraph with text.</p>
    </div>
</body>

 

type selector

سلکتور شناسه در css

 سلکتور شناسه، اجزای سند HTML را براساس مقدار ویژگی id انتخاب می‌کند. از این نوع سلکتور معمولا زمانی استفاده می‌شود که جزء خاصی از صفحه موردنظر است.

#id_value { css style properties }
#coffee { 
    background-color: lightblue;
}
<body>
    <div>
        <p>This paragraph doesn't have any id attribute.</p>
        <p id="coffee">This paragraph has an id of "coffee".</p>
    </div>
</body>

 

id selector

سلکتور کلاس در css

این سلکتور معمولا پرکاربردترین سلکتور است. معمولا برنامه نویسان به همه اجزای صفحه، یک نام کلاس نسبت می‌دهند و برای اجزایی که ویژگی‌های مشترکی دارند، نام کلاس یکسانی درنظر گرفته می‌شود. با این روش، می‌توان یک بار و بدون نیاز به چند بار تکرار، ویژگی‌های یکسانی را برای همه آن‌ها تعریف کرد.

.class_name { css style properties }
.awesome { 
    background-color: lightblue;
}
<body>
    <div>
        <p>This paragraph doesn't have any class.</p>
        <p class="awesome">This paragraph has awesome class.</p>
        <div class="foo bar awesome">This div has 3 classes.  One of them is awesome.</<span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre="Then "><span class="hiddenGrammarError" pre="use ">div>
    </div</span></span></span></span></span></span>>
</body>

 

Class Selector

سلکتورهای ویژگی در css

این سلکتور، اجزای صفحه را براساس داشتن یا نداشتن یک ویژگی خاص انتخاب می‌کنند. برای این نوع سلکتور، از براکت مربعی استفاده می‌شود. در ادامه به چندین نوع آن اشاره خواهیم کرد.

سلکتور [attribute]

این سلکتور، اجزایی را انتخاب می‌کند که ویژگی موردنظر را داشته باشند.

[attribute] { css style properties }

در مثال زیر، اجزای صفحه با ویژگی "title" انتخاب می‌شوند.

[title] { 
    background-color: lightblue;
}
<body>
    <a href="#" title="Happy Link">This link has a title attribute.</a>
    <a href="#">This link has no title attribute.</a>
</body>

 

[attribute] Selector

سلکتور [attr=value]

این سلکتور، اجزایی را انتخاب می‌کند که ویژگی موردنظر را با یک مقدار خاصی دارند.

[attribute=value] { css style properties }
[href="https://google.com"] {
    background-color: lightblue;
}
<body>
    <a href="https://google.com">Google</a>
    <a href="https://bing.com">Bing</a>
    <a href="https://duckduckgo.com">Duck Duck Go</a>
</body>

انتخابگر ویژگی با مقدار

 سلکتور [attribute~=value]

 این سلکتور، اجزایی را انتخاب می‌کند که ویژگی خاصی دارد و مقدار آن شامل یک رشته خاص است.

[attribute~=value] { css style properties }

در نمونه زیر، اجزایی انتخاب می‌شود که ویژگی "data" دارد و مقدار آن دارای رشته "hooray" است.

[data~="hooray"] {
    background-color: lightblue;
}
<body>
    <div data="hip">This is hip.</div>
    <div data="hip hop">This is hip hop.</div>
    <div data="hip hop hooray">Hip hop hooray.</div>
</body>

انتخابگر پایپ مساویسلکتور [attribute|=value]

این سلکتور، اجزایی را انتخاب می‌کند که ویژگی خاصی دارند و مقدار آن‌ها برابر با یک رشته خاص است یا با آن آغاز می‌شود.

[attribute|=value] { css style properties }

 در مثال زیر، اجزایی انتخاب می‌شوند که ویژگی "class" دارند و مقدار آن‌ها با رشته "lg" آغاز می‌شوند.

[class|="lg"] {
    background-color: lightblue;
}
<body>
    <div class="btn">Button</div>
    <div class="lg-btn">Large Button</div>
    <div class="sm-btn">Small Button</div>
</body>

انتخابگر پایپ مساوی

 سلکتور [attribute^=value]

 این سلکتور، اجزایی از صفحه را انتخاب می‌کند که یک ویژگی خاص داشته باشد و مقدار این ویژگی، با یک رشته خاص آغاز شده باشد.

[attribute^=value]

 در مثال زیر، اجزایی که مقدار ویژگی href آن‌ها با "http" آغاز شده باشد، انتخاب می‌شود.

a[href^="http://"] {
    background-color: lightblue;
}
<body>
    <a href="http://www.webdesignernews.com/">Web Design News (External Link)</a>
    <a href="/design/web.html">Design Category (Internal Link)</a>
</body>

انتخابگر caret

 سلکتور  [attribute$=value]

 این سلکتور، اجزایی را انتخاب می‌کند که یک ویژگی خاص داشته باشد و مقدار این ویژگی، با یک رشته خاص به پایان برسد.

[attribute$=value]

 در مثال زیر، اجزایی را که ویژگی href دارند و مقدار آنها با ".pdf" به پایان می‌ر‌سد، انتخاب می‌شود.

a[href$=".pdf"] {
    background-color: lightblue;
}
<body>
    <a href="http://www.webdesignernews.com/">Web Design News</a>
    <a href="/design/great.pdf">A Great PDF To Read</a>
</body>

انتخابگر [attribute$=value]

 سلکتور  [attribute*=value]

 این سلکتور، اجزایی را انتخاب می‌کند که یک ویژگی خاص داشته باشد و مقدار آن‌ها شامل یک رشته خاص باشد.

[class*="blockquote"] {
    background-color: lightblue;
}
<body>
    <div class="blockquote-lead">Leading div element.</div>
    <div class="banana">Div in the middle.</div>
    <p class="blockquote-footer">Paragraph in the footer area.</p>
</body>

انتخابگر [attribute*=value]

 سلکتور عام در css

این سلکتور که نحو آن به صورت زیر است، همه اجزای صفحه را انتخاب می‌کند. این سلکتور به صورت رایج استفاده نمی‌شود، بلکه برای مواردی مانند تنظیم پدینگ و حاشیه اجزای صفحه می‌تواند به کار برود.

* 
{ css style properties }
* {
    background-color: lightblue;
}

 

انتخابگر عام

 سلکتورهای ترکیبی در css

 در این دسته از سلکتورها، چندین تگ که با یکدیگر رابطه فرزند و والدی یا مجاورت دارند، بیان می‌شوند.

سلکتور فرزندان

در این سلکتور شما دو تگ را مشخص می‌کنید که اولی، تگ والد و دیگری تگ فرزند هستند. طبق این سلکتور، تمام تگ‌های فرزندی که درون تگ مادر هستند، صرف نظر اینکه در چه سطحی باشند، انتخاب می‌شود. در مثال زیر، تمام تگ‌های li که در تگ div قرار دارند، پس زمینه‌ای به رنگ آبی کمرنگ خواهند داشت.

div li {
    background-color: lightblue;
}
<body>
    <ul>
        <li>First in the list.</li>
        <li>Second in the list.</li>
    </ul>
    <div>
        <li>First in the list.</li>
        <li>Second in the list.</li>
    </div>
</body>

 

انتخابگر فرزندان

سلکتور فرزند 

این سلکتور از عملگر < استفاده می‌کند و اولین فرزندان (در سطح اول) یک تگ خاص را انتخاب می‌کند. نحوه استفاده از این سلکتور به صورت زیر است:

tag > tag { css style properties }

در نمونه زیر، تگ‌های p که در سطح اول فرزندان تگ div هستند، انتخاب می‌شوند.

div > p {
    background-color: lightblue;
}
<body>
    <div>
        <p>Paragraph in a div.</p>
        <p>Another paragraph in a div.</p>
        <span>
            <p>A paragraph in a span.</p>
        </span>
    </div>
</body>

 

انتخابگر فرزند

 همانگونه که در نمونه بالا مشاهده می‌کنید، پاراگراف سوم به رنگ آبی درنیامده است و علت آن هم این است که این تگ درون تگ span قرار دارد. به عبارت دیگر جزو فرزندان سطح اول نیست.

 سلکتور هم نیای مجاور

این سلکتور از عملگر  + استفاده می‌کند و تگ‌هایی را انتخاب می‌کند که هر دو فرزند یک والد هستند و در ساختار درختی اجزای صفحه، دقیقا پشت سر هم قرار دارند.

نمونه زیر، تگ‌های p را که دقیقا پشت سر h2 قرار دارد، انتخاب می‌کند.

h2 + p {
    background-color: lightblue;
}
<body>
    <div>
        <h1>Adjacent Sibling Combinator!</h1>
        <p>Paragraph.</p>
        <section>
            <h2>Section Title</h2>
            <p>Paragraph in the section.</p>
            <p>Next Paragraph in the section.</p>
        </section>
        <p>Paragraph after the section.</p>
    </div>
</body>

انتخابگر مجاور

سلکتور هم نیای عمومی

این سلکتور از عملگر ~ استفاده می‌کند و اجزایی را تحت تاثیر قرار می‌دهد که هر دو فرزند یک والد مشترک داشته باشند.

tag ~ tag { css style properties }

در مثال زیر، تگ‌های h1 و section هر دو فرزندان تگ div هستند. اگرچه تگ p بین این دو تگ قرار دارد، اما در این سلکتور مجاور بودن دو تگ اهمیتی ندارد و در نتیجه، پس زمینه تگ section ، آبی خواهد بود.

h1 ~ section {
    background-color: lightblue;
}
<body>
    <div>
        <h1>General Sibling Combinator!</h1>
        <p>Paragraph.</p>
        <section>
            <h2>Section Title</h2>
            <p>Paragraph in the section.</p>
            <p>Next Paragraph in the section.</p>
        </section>
        <p>Paragraph after the section.</p>
    </div>
</body>

 

انتخابگر مجاور عام

انتخابگر مجاور عام

شبه کلاس ها در css

 شبه کلاس‌ها، اجزای صفحه را براساس وضعیت آن‌ها تحت تاثیر قرار می‌دهند. این اطلاعات معمولا در ساختار درختی سندهای HTML وجود ندارد. در ادامه ابتدا شبه کلاس‌های ساختاری را توضیح می‌دهیم.

شبه کلاس های ساختاری

این شبه کلاس‌ها، اجزایی را انتخاب می‌کند که در صورت استفاده نکردن از شبه کلاس‌ها برای تحت تاثیر قرار دادن آن‌ها، مجبور به تعریف شناسه یا کلاس برای آن‌ها بودیم.

سلکتور  :first-child

 این سلکتور، اولین فرزند یک جز خاص در سند HTML را انتخاب می‌کند.

:first-child { css style properties }
p:first-child {
    background-color: lightblue;
}
<body>
    <p>This &lt;p&gt; is the first child of &lt;body&gt;.</p>

    <h1>:first-child Selector Example</h1>
    <p>This &lt;p&gt; is the third child of &lt;body&gt;.</p>

    <div>
        <p>This &lt;p&gt; is the first child of &lt;div&gt;.</p>
        <p>This &lt;p&gt; is not the first child of &lt;div&gt;.</p>
    </div>
</body>

انتخابگر :first-child

 سلکتور last-child:

این سلکتور، آخرین فرزند یک جز از سند HTML را انتخاب می‌کند.

:last-child { css style properties }
p:last-child {
    background-color: lightblue;
}

انتخابگر :last-child

انتخابگر تگ برای تگ p

 سلکتور nth-child:

این سلکتور، nامین فرزند یک جزء از سند را انتخاب می‌کند. nامین فرزند را می‌توان با یک عدد صحیح، کلید واژه‌هایی همچون even , odd یا یک عبارت محاسباتی مشخص کرد.

:nth-child { css style properties }

مثال اول:

:nth-child(4) {
    background-color: lightblue;
}
<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
</ul>
</body>

انتخابگر nامین فرزند

مثال دوم:

li:nth-child(even) {
    background-color: lightblue;
}
<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
</ul>
</body>

انتخابگر nامین فرزند

انتخابگر شناسه

 مثال سوم:

li:nth-child(odd) {
    background-color: lightblue;
}
<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
</ul>
</body>

انتخابگر nامین فرزند

مثال چهارم:

li:nth-child(3n+3) {
    background-color: lightblue;
}


<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
    <li>Porche</li>
</ul>
</body>

انتخابگر nامین فرزند

سلکتور  :nth-last-child

 این سلکتور، nامین فرزند را با شمارش از آخرین فرزند یک جزء خاص انتخاب می‌کند.

:nth-last-child { css style properties }

مثال اول:

li:nth-last-child(2) {
    background-color: lightblue;
}
<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
    <li>Porche</li>
</ul>
</body>

 

hامین فرزند آخر

مثال دوم:

li:nth-child(even) {
    background-color: lightblue;
}

<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
</ul>
</body>

 

نمونه last-child

 مثال سوم:

li:nth-last-child(odd) {
    background-color: lightblue;
}
<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
    <li>Porche</li>
</ul>
</body>

 

last-child-example3

مثال چهارم:

li:nth-child(3n+3) {
    background-color: lightblue;
}

<body>
<ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Subaru</li>
    <li>Toyota</li>
    <li>Lambo</li>
    <li>Porche</li>
</ul>
</body>

 

last-child-example4

سلکتور :only-child

این سلکتور، اجزایی را انتخاب می‌کنند که تنها فرزند والد خود است و هیچ تگی در مجاورت خود ندارد.

:only-child { css style properties }
div:only-child {
    background-color: lightblue;
}
<body>
    <div>
        <div>This div is an only child.</div>
    </div>

    <div>
        <div>This div is a 1st sibling.</div>
        <div>This div is a 2nd sibling.</div>
        <div>This div is a 3rd sibling
            <div>This div is an only child.</div>
        </div>
    </div>
</body>

انتخابگر only-child

 سلکتور :first-of-type

 این سلکتور، اولین جزء از تگ مشخص شده در هر والدی را انتخاب می‌کند.

:first-of-type { css style properties }

برای مثال، در زیر اولین div در  اولین تگ div والد و همچنین اولین div در دومین تگ div والد را استخراج می‌کند. 

div div:first-of-type {
    background-color: lightblue;
}

انتخابگر first-of-type

سلکتور  last-of-type:

 این سلکتور شبیه به سلکتور  first-of-type: است، با این تفاوت که آخرین تگ از نوع مشخص شده انتخاب می‌شود.

:last-of-type { css style properties }

در مثال زیر، آخرین تگ‌های div در تگ div والد انتخاب می‌شوند.

div div:last-of-type {
    background-color: lightblue;
}
<body>
    <div>
        <p>Paragraph</p>
        <div>div</div>
        <div>div</div>
        <ul>
            <li>list item</li>
        </ul>
    </div>
    <div>
        <p>Paragraph</p>
        <div>div</div>
        <div>div</div>
        <ul>
            <li>list item</li>
        </ul>
    </div>
</body>

انتخابگر last-type-of

 سلکتور  nth-of-type:

 این سلکتور، nامین تگ از نوع موردنظر را انتخاب می‌کند.

:nth-of-type { css style properties }

برای مثال، در زیر تمام divهای زوج درون div والد انتخاب می‌شود.

div div:nth-of-type(even) {
    background-color: lightblue;
}
<body>
    <div>
        <p>A p tag</p>
        <div>A div tag</div>
        <div>A div tag</div>
        <p>A p tag</p>
        <p>A p tag</p>
        <p>A p tag</p>
        <div>A div tag</div>
        <div>A div tag</div>
        <p>A p tag</p>
    </div>
</body>

 

انتخابگر nth-of-type

 سلکتور  nth-last-of-type:

 این سلکتور، nامین جزء را با شمارش از آخرین اجزا یک والد انتخاب می‌کند.

:nth-last-of-type { css style properties }
div div:nth-last-of-type(even) {
    background-color: lightblue;
}
<body>
    <div>
        <p>A p tag</p>
        <div>A div tag</div>
        <div>A div tag</div>
        <p>A p tag</p>
        <p>A p tag</p>
        <p>A p tag</p>
        <div>A div tag</div>
        <div>A div tag</div>
        <p>A p tag</p>
    </div>
</body>

انتخابگر nth-last-of-type

 سلکتور only-of-type:

این سلکتور، یک جزء را در صورتی انتخاب می‌کند که در میان فرزندان والد خود، تنها فرزند از نوع خود باشد.

:only-of-type { css style properties }
p:only-of-type {
    background-color: lightblue;
}
<body>
    <div>
        Div 1
        <p>1 p tag</p>
        <p>2 p tags</p>
    </div>
    <div>
        Div 2
        <p>1 p tag</p>
    </div>
</body>همانگونه که از نامش برمیآید برای انتخاب دستهای از اجزاء صفحه استفاده میشود. 

انتخابگر only-of-type

 سلکتور:empty

 این سلکتور، اجزایی را مشخص می‌کند که محتوایی ندارند و احتمالا محتوای آن‌ها در طول اجرا و به صورت پویا تولید می‌شود. در مثال زیر، با استفاده از این سلکتور تمام اجزا خالی را پنهان کردیم.

widget:empty {
    display:none;
}

شبه اجزا

این دسته از سلکتورها عموما برای تغییر محتوایی اجزای سند HTML استفاده می‌شود. عملگری که برای آن‌ها به کار می‌رود، :: است.

سلکتور ::before

این شبه جزء عموما برای اضافه کردن محتوا قبل از تگ موردنظر استفاده می‌شود و معمولا همراه با ویژگی content به کار می‌رود.

p::before {
    content: 'Check this out: ';
    color: gray;
}

 

<body>
    <div>
        <p>This is a message you don't want to miss.</p>
    </div>
</body>

::before انتخابگر

سلکتور after::

این سلکتور برای اضافه کردن محتوا پس از تگ موردنظر استفاده می‌شود و معمولا همراه با ویژگی content به کار می‌رود.

::after { css style properties }
p::after {
    content: '  Thanks for reading!';
    color: gray;
}

<body>
    <div>
        <p>This is a message you don't want to miss.</p>
    </div>
</body>

سلکتور first-line::

این سلکتور، اولین خط از  اجزای مشخص شده را انتخاب می‌کند. این اجزا معمولا از نوع بلاک هستند.

::first-line { css style properties }
p::first-line {
    background-color: lightblue;
}

<body>
    <div>
        <p>This paragraph is full of nonsense for the bored reader
            to find interest in. We're not sure how long it will go,
            but it would be nice if it goes a few lines so we can
            demonstrate the ::first-line pseudo-element. Thanks.
        </p>
    </div>
</body>

سلکتور first-letter::

این سلکتور، اولین حرف از جزء موردنظر را انتخاب می‌کند.

::first-letter { css style properties }
p::first-letter {
    background-color: lightblue;
    font-size: 25px;
}

<body>
    <div>
        <p>Hi. How's it going?</p>
    </div>
</body>

مطالعه مقالات مرتبط در لیداوب:

در این آموزش تلاش شد انواع سلکتورهای مورد استفاده در css به همراه حداقل یک مثال آورده شود. امیدوارم برای شما مفید باشد. سایر مقالات ما را می‌توانید در کتابخانه لیداوب دنبال کنید.

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...