🧔🏾 🗝️ 💅🏿 Псевдоклассы CSS: последний элемент :last-child(), первый :first-child() и нумерованный :nth--child() 👍🏿 👩🏻‍⚖️ 🍶

-? — , , . . , , CSS- . . , .

. . . , , , .

li:last-child{
padding-bottom: 0;
}

(::). CSS3 ::backdrop, ::before, ::after. , , DOM. , .

p::before{
content: '';
display: block;
width: 100%;
color: #222;
}

, , CSS (:last-child), (:first-child). (:nth-child), . :

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body{
			width: 100%;
			padding: 0;
			margin: 0;
			background: #000;
		}
		nav{
			display: flex;
			justify-content: flex-end;
			width: 100%;
			margin: 0;
			padding: 0;
			background: rgba(255,255,255,.1);

		}
		nav a{
			color: #fff;
			text-decoration: none;
			text-transform: uppercase;
			font: bold 15px Arial, sans-serif;
			padding: 1em;
		}
	</style>
</head>
<body>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
	</nav>
</body>
</html>

. , , . , CSS , , :

nav a:first-child{
			color: green;
		}
nav a:last-child{
			color: red;
		}

:nth-child

. . . CSS, :

/*      */
nav a:nth-child(-1){
border-right: 1px solid red;
}

:nth-child :

odd - ;
even - .

, :

nav a:nth-child(even){
	border-bottom: 1px solid yellow;
}

. , CSS , .

nav a:not(:last-child){
padding-right: 10px;
}

<a> <nav> , . CSS :not " ". , , - .

, , . :hover, .

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body{
			width: 100%;
			padding: 0;
			margin: 0;
			background: #000;
		}
		nav{
			display: flex;
			justify-content: flex-end;
			width: 100%;
			margin: 0;
			padding: 0;
			background: rgba(255,255,255,.1);
			overflow: hidden;
		}
		nav a{
			color: #fff;
			text-decoration: none;
			text-transform: uppercase;
			font: bold 15px Arial, sans-serif;
			padding: 1em;
			transition: all .5s ease-in-out;
		}
		nav a:not(:last-child){
			padding-right: 2em;
		}

	nav a:hover{
		border-bottom: 1px solid#D349CE;
		transform: scale(1.03);
		opacity: .8;
	}
	nav a:nth-child(2):hover{
		border-color: #46C5CD;
	}
	nav a:nth-child(3):hover{
		border-color: #3EDC79;
	}
	nav a:nth-child(-1):hover{
		border-color: #f69;
	}
	</style>
</head>
<body>
	<nav>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
		<a href="#"></a>
	</nav>
</body>
</html>

nav a:hover, , . . nav a:nth-child(n). :hover.

:focus :active <a>, . . CSS- HTML- JavaScript.

Псевдоклассы CSS: последний элемент :last-child(), первый :first-child() и нумерованный :nth--child()

:nth-child

More articles: