|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Seudo Classes in css</title>
|
|
|
|
|
|
<style>
|
|
|
.test li:hover {
|
|
|
color: red;
|
|
|
}
|
|
|
|
|
|
.test li a:active {
|
|
|
background-color: green;
|
|
|
}
|
|
|
|
|
|
.test li a:visited {
|
|
|
/* background-color آن را نمی توان عوض کرد */
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.box-shadow {
|
|
|
box-shadow: 0 0 4px 0 #c3c3c3;
|
|
|
}
|
|
|
|
|
|
.wrapper p:first-of-type {
|
|
|
color: red;
|
|
|
}
|
|
|
|
|
|
.wrapper :nth-child(5) {
|
|
|
color: red
|
|
|
}
|
|
|
|
|
|
.wrapper p:nth-child(5) {
|
|
|
color: green;
|
|
|
}
|
|
|
|
|
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
|
background-color: #efefef;
|
|
|
/* فاصله عناصر حدول از border */
|
|
|
border-spacing: 10px;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
<!--
|
|
|
seudo classes :
|
|
|
یک ساختار هستند که باعث فیلتر کردن یک سری از المان ها با استفاده از
|
|
|
یک سری از قواعد میشوند
|
|
|
که این قواعد را ما برای آن تعیین میکنیم
|
|
|
این قواعد همان نام ها هستند
|
|
|
|
|
|
outline:
|
|
|
حاشیه ی خارجی
|
|
|
border
|
|
|
است
|
|
|
محدوده ی اطراف بوردر عنصر قسمت بیرونی آن
|
|
|
|
|
|
:visited
|
|
|
یعنی دیده شده به طور مثال این لینک قبلا دیده شده است.
|
|
|
|
|
|
:first-child
|
|
|
|
|
|
:first-of-type
|
|
|
از یک نوع را انتخاب میکند.
|
|
|
در مواقعی استفاده میشود که المان والد جندین نوع تگ در داخل آن داشته باشد و ما فقز بخواهیم که
|
|
|
به طور مثال فقط پراگراف ها را انتخاب نماییم
|
|
|
میتوانیم از نام گلاس نیز استفاده کنیم
|
|
|
به طور مثال
|
|
|
.x:first-of-type {
|
|
|
|
|
|
}
|
|
|
:last-child
|
|
|
:last-of=type
|
|
|
:not(p){
|
|
|
|
|
|
}
|
|
|
تمامی المان ها به جز پراگراف را انتخال میکند.
|
|
|
دلیل استفاده از این ها این است که تا انجایی که میشود از کلاس و آیدی در کد هایمان استفاده نکنیم
|
|
|
|
|
|
:nth-child(6)
|
|
|
|
|
|
:nth-last-child();
|
|
|
|
|
|
:nth-last-of-type(n){
|
|
|
|
|
|
}
|
|
|
:only-of-type{
|
|
|
|
|
|
}
|
|
|
صرفا فرزندی را انتخاب میکند که در آن خانواده مذکور تک فرزند است.
|
|
|
|
|
|
:only-child{}
|
|
|
فقط یک فرزند باشد
|
|
|
|
|
|
even and odd:
|
|
|
|
|
|
p:nth-child(odd){
|
|
|
color: red;
|
|
|
}
|
|
|
|
|
|
input:disabled{
|
|
|
|
|
|
}
|
|
|
input:required{
|
|
|
|
|
|
}
|
|
|
input:disabled{
|
|
|
|
|
|
}
|
|
|
|
|
|
Positions: very Important
|
|
|
postition: static
|
|
|
عناصر به طور پیشفرض ماهیت استاتیک دارند
|
|
|
یعنی در هر جایی که ایجاد میشوند در همان جا ثابت هستند
|
|
|
|
|
|
postition: relative
|
|
|
یعنی جای آن ثابت است اما می توانیم جای آن را با انیمیشن یا این چیز ها جای آن را عوض کنیم
|
|
|
برای آن از این مورد استفاده می کنیم
|
|
|
عناصر درون آن میتوانند به خود آن وابسته باشند
|
|
|
|
|
|
position: absolute
|
|
|
اگر زمانی بخواهیم که عنصر فرزند را جابه جا کنیم نسبت به عنصر والد از این مورد استفاده میکنیم
|
|
|
و اکر بخواهیم این جا به جایی نسبت به عنصر والد باشد نه نسبت به سند
|
|
|
باید به والد
|
|
|
position: relative
|
|
|
بدهیم و به فرزند آن میبایست
|
|
|
position: absolute
|
|
|
بدهیم
|
|
|
باعث میشود که نسبت به عنصر والد خودش قابلیت شناوری پیدا کند و توسط موارد زیر جهت بگیرد
|
|
|
top
|
|
|
left
|
|
|
right
|
|
|
bottom
|
|
|
|
|
|
position: fixed;
|
|
|
ثابت است
|
|
|
top,left,right,bottom
|
|
|
هم میگیرد
|
|
|
|
|
|
pisiton: sticky;
|
|
|
|
|
|
box-shadow properties:
|
|
|
box-shadow: x y blur spread color;
|
|
|
|
|
|
-->
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<table>
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>نام</th>
|
|
|
<th>نام خانوادگی</th>
|
|
|
<th>ایمیل</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>علی</td>
|
|
|
<td>احمدی</td>
|
|
|
<td>aliAhmadi#gmail.com</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>عباس</td>
|
|
|
<td>قلی پور</td>
|
|
|
<td>aliAhmadi#gmail.com</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>سحر</td>
|
|
|
<td>عباسی</td>
|
|
|
<td>aliAhmadi#gmail.com</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>سارا</td>
|
|
|
<td>اسدی</td>
|
|
|
<td>aliAhmadi#gmail.com</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
