في هذا الدرس سنتعلم عن ميزتين في css
- Pseudo-classes
- Pseudo-elements
Pseudo-classes
تستعمل في العناصر المرتبة في ظروف معينة, على سبيل المثال:
الديناميكية في العناصر وخصوصا الروابط
- :hover
تتفعل عند تاشير الفارة اعلى العنصر او الرابط - :active
تتفعل عند تنشيط او القيام بالنقر على عنصر معين - :focus
تتفعل عند البقاء على تركيز معين, على سبيل المثال عند القيام بالضغط على حقل ادخال تتغير خلفيته وتستمر لكن عند الضغط بمكان اخر ترجع لوضعها السابق - :link
خاصة للروابط التي لم يسبق زيارتها من قبل - :visited
خاصة للروابط تمت زيارتها من قبل
حالات العناصر وخصوصا input
- :disabled
تتفعل في العنصر المعطى لهdisabled="disabled" - :enabled
تتفعل مع العناصر التي لم يعطى لها disabled - :checked
يستعمل في input من نوع check بحيث تتفعل عند اختيار احدها
الهيكلية (الأشقاء)
- :root
تعمل هذه الخاصية كعنصر html, ولهذا تكتب بدون اضافتها لعنصر معين - :empty
تتفعل مع العنصر الذي ليس به اي ابن - :first-child
تستعمل مع اول ابن من بين الابناء - :nth-child(n)
تستعمل مع ابن محدد بحيث يعطى لهم الرقم الترتيبي لهذا الابن او يمكن اختيار الابن بشكل (فردي او زوجي) وتكون بشكل تنازلي - :nth-last-child(n)
تستعمل مع ابن محدد بحيث يعطى لهم الرقم الترتيبي لهذا الابن او يمكن اختيار الابن بشكل (فردي او زوجي) وتكون بشكل تصاعدي - :nth-of-type(n)
تستعمل مع ابن محدد بحيث يعطى لهم الرقم الترتيبي لهذا الابن او يمكن اختيار الابن بشكل (فردي او زوجي) وتكون بشكل تنازلي, و تشترط ان تكون من نوع واحد - :nth-last-of-type(n)
تستعمل مع ابن محدد بحيث يعطى لهم الرقم الترتيبي لهذا الابن او يمكن اختيار الابن بشكل (فردي او زوجي) وتكون بشكل تصاعدي, و تشترط ان تكون من نوع واحد - :last-child
تستعمل مع اخر ابن من بين الابناء - :first-of-type
تستعمل مع اول عنصر له نوع محدد من بين عناصر لها نفس النوع - :last-of-type
تستعمل مع اخر عنصر له نوع محدد من بين عناصر لها نفس النوع - :only-child
تستعمل مع العنصر الذي يحتوي ابن واحد - :only-of-type
تستعمل مع العنصر الذي يحتوي عنصر معين واحد
اخرى
- :not(x)
- :lang(lang)
- :target
Pseudo-elements
تقوم بانشاء عناصر جديدة غير محددة في ترميز المستند ويمكن معالجتها كعنصر منتظم, وهذا يساعد بالقيام بتاثيرات جميلة باقل قدر من الاكواد, وهي :
- ::before
- ::after
- ::first-letter
- ::first-line
ويمكن التفريق بين Pseudo-classes و Pseudo-elements عبر ( : )
حيث Pseudo-classes تكتب قبلها ( : ) واحدة اما Pseudo-elements تكتب قبلها ( :: ) مزدوجة
هنا احد الامثلة لاستخدام بعض هذه الميزات
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>The benefits of fruits</title>
</head>
<body>
<header>
<h1>The benefits of fruits</h1>
</header>
<main>
<div class="card">
<div class="img_fruit">
<img src="apples.jpg" alt="apples">
</div>
<div class="inf_fruit">
<article>
<h2>apple</h2>
<section> extremely rich in important antioxidants, flavanoids, and dietary fiber.
The phytonutrients and antioxidants in apples may help reduce the risk of developing cancer,
hypertension, diabetes, and heart disease.
This article provides a nutritional profile of the fruit and its possible health benefits.
</section>
</article>
</div>
</div>
<div class="card">
<div class="img_fruit">
<img src="orange.jpg" alt="apples">
</div>
<div class="inf_fruit">
<article>
<h2>orange</h2>
<section>contain thiamin, riboflavin, niacin, vitamin B-6,
folate, pantothenic acid, phosphorus, magnesium, manganese, selenium and copper.
Because of their high vitamin C content (over twice the daily need)
oranges are associated with boosting the immune system.
</section>
</article>
</div>
</div>
<div class="card">
<div class="img_fruit">
<img src="strawberries.jpg" alt="apples">
</div>
<div class="inf_fruit">
<article>
<h2>strawberries</h2>
<section>Strawberries are a healthful fruit choice for people with diabetes.
The substantial fiber content of the berries also helps to regulate blood sugar
and keep it stable by avoiding extreme highs and lows.
</section>
</article>
</div>
</div>
<div class="card">
<div class="img_fruit">
<img src="blueberries.jpg" alt="apples">
</div>
<div class="inf_fruit">
<article>
<h2>blueberries</h2>
<section>Blueberries can help heart health,
bone strength, skin health, blood pressure, diabetes management,
cancer prevention, and mental health.
</section>
</article>
</div>
</div>
<div class="card">
<div class="img_fruit">
<img src="tomatoes.jpg" alt="apples">
</div>
<div class="inf_fruit">
<article>
<h2>tomatoes</h2>
<section>Including tomatoes in the diet can help protect against cancer,
maintain healthy blood pressure, and reduce blood glucose in people with diabetes.
Tomatoes contain key carotenoids such as lutein and lycopene.</section>
</article>
</div>
</div>
</main>
</body>
</html>
css
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
}
header {
background-image: url('almonds.jpg');
width: 100%;
height: 400px;
display: grid;
align-items: center;
justify-content: center;
background-size: cover;
}
header h1, .card .inf_fruit article {
margin: 0;
color: white;
filter: drop-shadow(2px 4px 2px black);
backdrop-filter: blur(3px);
}
/* اضافة خط اعلى واسفل العنوان */
header h1::after, header h1::before {
content: "";
border: 1.5px solid white;
width: 100%;
display: block;
margin: 2px auto;
}
main, .card article {
width: 100%;
}
.card {
display: flex;
border-bottom: 3px solid white;
}
/*
عبارة عن ابناء .card هنا يعتبر
main للاب
هنا نختار اول ابن, ونضع له خط فاصل من الاعلى
*/
.card:first-child {
border-top: 3px solid white;
}
/* هنا نختار اخر ابن ونزيل منه اي خط زائد من الاسفل */
.card:last-child {
border-bottom: 0;
}
/* نختار هنا كل ابن بشكل زوجي فقط
ونستطيع غير ذلك اختيار الابناء بشكل فردي او
باختيار عنصر محدد بوضع رقمه */
.card:nth-child(even) {
flex-direction: row-reverse;
border-right: 0;
}
.card article {
padding: 20px;
text-align: center;
height: 100%;
}
.card article section {
margin-top: 50px;
font-size: 18px;
line-height: 2;
}
.card .img_fruit, .card .inf_fruit {
width: 50%;
}
.card .img_fruit img {
max-width: 100%;
display: block;
}
.card .inf_fruit {
background-size: cover;
}
.card:nth-child(odd) .img_fruit, .card:nth-child(even) .inf_fruit {
border-right: 3px solid white;
}
.card:first-child .inf_fruit {
background-image: url('apple-blur.jpg')
}
.card:nth-child(2) .inf_fruit {
background-image: url('appetizing-orange.jpg')
}
.card:nth-child(3) .inf_fruit {
background-image: url('strawberries-bowl.jpg')
}
.card:nth-child(4) .inf_fruit {
background-image: url('blueberry.jpg')
}
.card:last-child .inf_fruit {
background-image: url('cuted-tomatoes.jpg')
}
اعتذر لتاخر الدرس الثالث
شكرا على المتابعة 
