style دهی به عناصر در HTML با ویژگی ها یا مقادیر خاص
نکته : مرورگرهای Ie8 و Ie9 از خواص selector ها پشتیبانی نمی کنند مگر اینکه حتما از DOCTYPE! استفاده نمایید.
CSS [attribute] selector :
از attribute] selector] ها برای انتخاب عناصر با یک ویژگی مشخص استفاده می شود.
در مثال زیر تمام تگ های <a> با ویژگی target استایل دهی شده اند.
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: green;
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://sargonco.com">sargonco.com</a>
<a href="https://sargonco.com" target="_blank">sargonco.com</a>
<a href="https://sargonco.com" target="_top">sargonco.com</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [Attribute=value] selector :
از Attribute=value] selector] ها برای انتخاب عناصر با یک ویژگی و مقدار مشخص استفاده می شود.
در مثال زیر تمام تگ های <a> با ویژگی target_blank استایل دهی شده اند.
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color: red;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://sargonco.com">sargonco.com</a>
<a href="https://sargonco.com" target="_blank">sargonco.com</a>
<a href="https://sargonco.com" target="_top">sargonco.com</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [attribute~=value] selector :
از attribute~=value] selector] ها برای انتخاب عناصر با یک ویژگی مشخص که شامل یک مقدار خاص می باشد، استفاده می شود.
در مثال زیر تمام عناصری که title آنها شامل یک سری کلمات به صورت مجزا که یکی از آنها "گل" است می باشند.
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid orange;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
<img src="img_flwr.gif" title="flower" width="224" height="162" />
<img src="img_tree.gif" title="tree" width="200" height="358" />
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
مثال بالا تمام عناصری که به طور مثال دارای "title="red flower یا "title="flower new و یا "title="flower هستند را شامل می شود اما عناصری که دارای "title="flowers و یا "title="my-flowers هستند را شامل نمی شود.
CSS [attribute|=value] selector :
از attribute|=value] selector] ها برای انتخاب عناصری استفاده می شود که با مقدار خاصی شروع می شوند.
مثال زیر تمامی عناصری که نام کلاس آنها با top شروع می شود را style دهی می نماید.
نکته : این نوع استایل دهی شامل کلاس هایی می شود که نام آنها فقط top باشد مثل "class="top ویا نام کلاس به همراه خط تیره باشد مانند "class="top-text
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [attribute^=value] selector :
از attribute^=value] selector] ها برای انتخاب عناصری استفاده می شود که با مقدار خاصی شروع می شوند.
در مثال زیر تمامی عناصری که نام کلاس آنها با top شروع می شود استایل دهی می شوند.
نکته : این حالت شامل کلاس هایی که حاوی کلمه top هستند به طور مثال "class="newtop نمی شود بلکه حتما باید شروع آنها با کلمه top باشد.
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [attribute$=value] selector :
از attribute$=value] selector] ها برای انتخاب عناصری استفاده می شود که به مقدار خاصی شروع ختم می شوند.
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: red;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<div class="test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
CSS [attribute*=value] selector :
از attribute*=value] selector] ها برای انتخاب عناصری استفاده می شود که شامل مقدار خاصی باشند.
در مثال زیر تمامی عناصری که مقدار کلاس (attribute) آنها شامل "te" باشد استایل دهی می شوند.
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
استایل دهی به فرم ها :
در این حالت شما می توانید به فرم ها بدون استفاده از کلاس یا آی دی استایل دهی نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
سایر selector ها :
| Selector |
Example |
Example description |
|
| .class |
.intro |
Selects all elements with class="intro" |
|
| #id |
#firstname |
Selects the element with id="firstname" |
|
| * |
* |
Selects all elements |
|
| element |
p |
Selects all <p> elements |
|
| element,element |
div, p |
Selects all <div> elements and all <p> elements |
|
| element element |
div p |
Selects all <p> elements inside <div> elements |
|
| element>element |
div > p |
Selects all <p> elements where the parent is a <div> element |
|
| element+element |
div + p |
Selects all <p> elements that are placed immediately after <div> elements |
|
| element1~element2 |
p ~ ul |
Selects every <ul> element that are preceded by a <p> element |
|
| [attribute] |
[target] |
Selects all elements with a target attribute |
|
| [attribute=value] |
[target=_blank] |
Selects all elements with target="_blank" |
|
| [attribute~=value] |
[title~=flower] |
Selects all elements with a title attribute containing the word "flower" |
|
| [attribute|=value] |
[lang|=en] |
Selects all elements with a lang attribute value starting with "en" |
|
| [attribute^=value] |
a[href^="https"] |
Selects every <a> element whose href attribute value begins with "https" |
|
| [attribute$=value] |
a[href$=".pdf"] |
Selects every <a> element whose href attribute value ends with ".pdf" |
|
| [attribute*=value] |
a[href*="w3schools"] |
Selects every <a> element whose href attribute value contains the substring "w3schools" |
|
| :active |
a:active |
Selects the active link |
|
| ::after |
p::after |
Insert content after every <p> element |
|
| ::before |
p::before |
Insert content before the content of every <p> element |
|
| :checked |
input:checked |
Selects every checked <input> element |
|
| :disabled |
input:disabled |
Selects every disabled <input> element |
|
| :empty |
p:empty |
Selects every <p> element that has no children (including text nodes) |
|
| :enabled |
input:enabled |
Selects every enabled <input> element |
|
| :first-child |
p:first-child |
Selects every <p> element that is the first child of its parent |
|
| ::first-letter |
p::first-letter |
Selects the first letter of every <p> element |
|
| ::first-line |
p::first-line |
Selects the first line of every <p> element |
|
| :first-of-type |
p:first-of-type |
Selects every <p> element that is the first <p> element of its parent |
|
| :focus |
input:focus |
Selects the input element which has focus |
|
| :hover |
a:hover |
Selects links on mouse over |
|
| :in-range |
input:in-range |
Selects input elements with a value within a specified range |
|
| :invalid |
input:invalid |
Selects all input elements with an invalid value |
|
| :lang(language) |
p:lang(it) |
Selects every <p> element with a lang attribute equal to "it" (Italian) |
|
| :last-child |
p:last-child |
Selects every <p> element that is the last child of its parent |
|
| :last-of-type |
p:last-of-type |
Selects every <p> element that is the last <p> element of its parent |
|
| :link |
a:link |
Selects all unvisited links |
|
| :not(selector) |
:not(p) |
Selects every element that is not a <p> element |
|
| :nth-child(n) |
p:nth-child(2) |
Selects every <p> element that is the second child of its parent |
|
| :nth-last-child(n) |
p:nth-last-child(2) |
Selects every <p> element that is the second child of its parent, counting from the last child |
|
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p> element of its parent, counting from the last child |
|
| :nth-of-type(n) |
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
|
| :only-of-type |
p:only-of-type |
Selects every <p> element that is the only <p> element of its parent |
|
| :only-child |
p:only-child |
Selects every <p> element that is the only child of its parent |
|
| :optional |
input:optional |
Selects input elements with no "required" attribute |
|
| :out-of-range |
input:out-of-range |
Selects input elements with a value outside a specified range |
|
| :read-only |
input:read-only |
Selects input elements with the "readonly" attribute specified |
|
| :read-write |
input:read-write |
Selects input elements with the "readonly" attribute NOT specified |
|
| :required |
input:required |
Selects input elements with the "required" attribute specified |
|
| :root |
:root |
Selects the document's root element |
|
| ::selection |
::selection |
Selects the portion of an element that is selected by a user |
|
| :target |
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
|
| :valid |
input:valid |
Selects all input elements with a valid value |
|
| :visited |
a:visited |
Selects all visited links |
|