ნათესაური სელექტორები LESS-ის ბუდობაში
მოდით განვიხილოთ, როგორ დაამატოთ LESS-ში, ბუდობის დროს, სხვადასხვა სელექტორები, რომლებიც ირჩევენ ელემენტებს ნათესაობის მიხედვით. ნახეთ მაგალითები.
მაგალითი
შვილობილი სელექტორი:
styles.lessdiv {
> p {
color: red;
}
}
კომპილაციის შედეგი:
styles.cssdiv > p {
}
მაგალითი
მეზობელი სელექტორი
styles.lessdiv {
+ p {
color: red;
}
}
კომპილაციის შედეგი:
styles.cssdiv + p {
}
მაგალითი
დაშორებული-ნათესაური სელექტორი:
styles.lessdiv {
~ p {
color: red;
}
}
კომპილაციის შედეგი:
styles.cssdiv ~ p {
}
პრაქტიკული ამოცანები
Задание 1
ახსენით, როგორი იქნება შემდეგი კოდის კომპილაციის შედეგი:
styles.lessul {
color: red;
> li {
padding: 20px;
}
}
Задание 2
ახსენით, როგორი იქნება შემდეგი კოდის კომპილაციის შედეგი:
styles.lessdiv {
ul {
> li {
padding: 20px;
}
}
}