Nth-child The : nth-child

Изтегляне 0.99 Mb.

страница	2/3
Дата	13.04.2022
Размер	0.99 Mb.
	#114089

1 2 3

css

:nth-child(n+7)
p:nth-child(n)
p:nth-child(n+8):nth-child(-n+15)

:nth-child(7)
Represents the seventh element.
:nth-child(5n)
Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0, like in the next example.
:nth-child(n+7)
Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.
:nth-child(3n+4)
Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.
:nth-child(-n+3)
Represents the first three elements. [=-0+3, -1+3, -2+3]
p:nth-child(n)
Represents every
element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).
p:nth-child(1) or p:nth-child(0n+1)
Represents every
that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).
p:nth-child(n+8):nth-child(-n+15)
Represents the eighth through the fifteenth
elements of a group of siblings.

Formulas- https://css-tricks.com/useful-nth-child-recipies/

Background-position property:

Ширина и височина на колони на цялата таблица или на определени клетки/колони и приоритет на действията в кода.

Измерих w/h в пейнт

В началото с кода:
td,th{
border: 1px solid #000;
height: 36px; - поставям на всички клетки тази ширина
}
Ширина на всички нечетни колони
col:nth-child(2n+1){
width: 104px;
text-align: left;

}
Ширина на всички четни колони

col:nth-child(2n){
min-width: 63px; тук не е само width, защото така казваме задължително те да са винаги 63px. Забелязваме обаче че в таблицата клетките от 8мата колона са по-тесни от другите клетки в четни колони. За да имаме възможността да зададем конкретна ширина само върху клетките от 8мата колона тук свойството е min-width; То не задължава това да е точната ширинина и позволява тя да бъде променяна. Достатъчна е промяната на ширината само на 1вата клетка от колоната, защото другите клетки под нея следват нейната ширина (когато променим височина на клетка-всички клетки от същия ред имат същата дължина, а когато променим ширина на клетка, всички клетки от същата колона имат същата дължина) Също така след като сложим min-width , трябва отново да пренапишем ширината на клетките в колона №6, защото сме променили нещо в нея по-долу от кода с който задаваме ширина на клетките от четни колони, имаме код който променя шрифта в тези клетки - td:nth-child(6){
font-size: 20px;
width: 63px; независимо че не променяме едно и също свойство, някак се приема като същото
}
}

Когато поставям и снимките чрез CSS като background там кода също е нареден по начин съобразен с приоритета на изпълнение на кода

Problem 2
Multiple color-background- https://webkit.org/blog/1424/css3-gradients/
Ex: background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);

Don’t forget that gradients are a type of generated image, not a property.

За точни граници:
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
Прилагане на стил само върху първия е елемент-дете след друго дете (с един и същ родител):

Ако има p , вложен в

+други вложени неща в

и в тях вложени p , се обхваща само първия p (или колкото са всички параграфи на които див е пряк родител), но другите не се обхващат

-Programmatic quotes (could be double (“) or single (‘)) in CSS.

-Как да направим препратка към секция в същата страница:
Отново с елемент <а> : в Problem2-> Web Safe Colors
*ColorKitchen.html- името на файла
*#webSafeColors- id на елемент към който искаме да направим препратка

Поставяне на кавички със CSS
span:first-of-type{
quotes: '"' '"';
}

span:first-of-type::before{
content: open-quote;
}
span:first-of-type::after{
content: close-quote;
}

:: or :

BEFORE AND AFTER+ background-image:
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
div::before {
content: "before";
}
div::after {
content: "after";
}

before

after

The only reasons to use one over the other are:

You want the generated content to come before the element content, positionally.
The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

Note that the content is still inside the element they are applied to. The naming sort of feels like they might come, ya know, before or after the element, but it’s really before or after the other content inside.
The value for content can be:

Изтегляне 0.99 Mb.

Сподели с приятели:

1 2 3