Испытание: первая раскладка [9/20]

oxojeck · 07.Май.2016 10:59:14

Задание легкое, но если у кого сложности, вот решение:

html, body {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
}

body {
    min-width: 550px;
    min-height: 250px;
    padding: 10px;
}

.cards {
    width: 500px;
}

.cards li::before {
    font-family: "Courier", monospace;
}

.cards li:not(:nth-of-type(4)):not(:first-of-type) {
    margin-left: -15px;
}

.cards li:not(:nth-of-type(4)) {
    width: 36px;
    height: 54px;
}

.cards li:nth-of-type(4) {
    margin-right: 30px;
    margin-left: 15px;
}

.cards:first-of-type li:last-of-type,
.cards:nth-of-type(2) li:nth-of-type(3),
.cards:nth-of-type(2) li:nth-of-type(5),
.cards:nth-last-of-type(2) li:first-of-type,
.cards:nth-last-of-type(2) li:nth-last-of-type(3) {
    background: #0099ff;
}

.cards:first-of-type li:nth-of-type(2),
.cards:nth-last-of-type(2) li:nth-of-type(2),
.cards:last-of-type li:nth-of-type(2) {
    background: #ff3300;
}

.cards:last-of-type li:nth-of-type(3),
.cards:last-of-type li:nth-last-of-type(1),
.cards:last-of-type li:nth-last-of-type(4) {
    background: #339933;
}

K1R5 · 12.Июнь.2016 06:30:14

Ты слишком много кода написал, тупо перечислениями каждой карты. Смотри код попроще:

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:not(:nth-of-type(4)):not(:first-of-type){
margin-left: -15px;
}

li:not(:nth-of-type(4)) {
width: 36px;
height: 54px;
}

li:nth-of-type(4){
margin-right: 30px;
margin-left: 15px;
}

.diamond:nth-child(2n){
background-color: #0099ff;
}

ul:not(:nth-of-type(2)) li:nth-of-type(2){
background-color: #ff3300;
}

ul:last-of-type li:nth-of-type(3n){
background-color: #339933;
}

ysergey · 12.Август.2016 08:29:11

Первая половина:
cards li:not(:nth-of-type(4)) - все “ли кроме червертых в каждой строке”

Вторая половина:
:not(:first-of-type) - кроме первых ГДЕ???

Прошу опишите этот диапазон словами. Очень хочется понять… ))

Ineska · 12.Август.2016 08:46:36

Это продолжение первого, “кроме первых в каждой строке”.

Valebas · 19.Август.2016 16:46:08

Задача, конечно, выполнена, но не покидает ощущение, что я сделала большую часть методом подстановки. Некоторые решения уже сейчас объяснить не могу. Кто-нибудь знает упражнения или тесты где цель обратная?

li:nth-child(n+3) {
    margin-left: -15px;
}

li:nth-child(n):not(:nth-of-type(4)) {
    width: 36px;
    height: 54px;
}

li:nth-of-type(4) {
    margin-right: 30px;
    margin-left: 15px;
}

.diamond:not(:nth-of-type(even)) {
    background-color: #0099ff;
}

.seven:not(.club) {
    background-color: #ff3300;
}

ul:last-of-type li:nth-of-type(3n+3) {
    background-color: #339933;
}

Igor_Sokolov · 24.Август.2016 08:52:26

Код можно написать из трех строк для обозначения цветов. Слишком длинный

Karina_Totoonova · 24.Август.2016 18:04:27

не могу понять эту часть кода, у меня стояло просто .cards li и был небольшой сдвиг без которого не пропускало дальше, заменила на эту часть и 100%, хотя абсолютно не пойму почему так((

.cards li:not:nth-of-type(4) - это же все кроме четвертого столбца
.cards li:not(:first-of-type)- все кроме первого столбца,
получается перегруз

можно же просто выбрать .cards li:not(:first-of-type)

правильно ли я понимаю

??

Alexey_Ivanov · 07.Октябрь.2016 21:58:30

Добрый вечер! Очень красивый код! Вроде бы, разобрался в нём. Единственное, чего не могу понять: как работает правило .diamond:nth-child(2n). Ведь бубны стоят в большинстве своём на НЕчётных местах, да и не все, что стоят на чётных, должны покраситься… Пожалуйста, поясните, если не сложно.

Dmitry_Stolyga · 15.Октябрь.2016 14:40:22

li:not(:nth-child(5)) {
width: 36px;
height: 54px;
Тоже работает

Или так
li:not(:nth-of-type(4)) {
width: 36px;
height: 54px;
}
Но код красивый! Автору respect!

KeyD · 18.Декабрь.2016 22:48:10

html,
body {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: "Courier", monospace;
}

li:not(.nine):not(:first-of-type) {
margin-left: -15px;
}

li:not(.nine) {
width: 36px;
height: 54px;
}

li.nine {
margin-right: 30px;
margin-left: 15px;
}

.diamond:nth-of-type(2n+1) {
background-color: #0099ff;
}

.seven:not(.club) {
background-color: #ff3300;
}

ul:last-of-type li:nth-of-type(3n) {
background-color: #339933;
}

Denton · 23.Декабрь.2016 21:41:56

А это на случай, если не хотите использовать классы, а действовать только селекторами.
p.s. шутка, конечно же я просто о классах карт забыл.
html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

.cards li:not(:nth-child(5)):not(:first-of-type){
margin-left: -15px;
}

.cards li:not(:nth-child(5)) {
width: 36px;
height: 54px;
}

.cards li:nth-child(5){
margin-right: 30px;
margin-left: 15px;
}

.cards:first-of-type li:last-of-type, .cards:nth-of-type(2) li:nth-of-type(2n+3):not(:nth-of-type(n+6)), .cards:nth-of-type(3) li:first-of-type, .cards:nth-of-type(3) li:nth-last-of-type(3){
background-color: #0099ff;
}

.cards:not(:nth-child(3)) li:nth-of-type(2) {
background-color: #ff3300;
}

.cards:last-of-type li:nth-of-type(3),.cards:last-of-type li:nth-of-type(6),.cards:last-of-type li:nth-of-type(9) {
background-color: #339933;
}
p.s. 100% - они и после такого 100%.

Ineska · 24.Декабрь.2016 06:59:41

Что сказать - оригинально)
Но разве нельзя немного сократить селектор, хотя бы последний, использовав формулу типа 3n например?

Denton · 24.Декабрь.2016 22:37:31

Можно конечно, но я ведь это не специально делал, хотел побыстрее закончить и пойти на форум проверять решение. В последнем селекторе как раз скопировал просто 3 раза одно и то же, что по времени быстрее вышло.
Уже на форуме знатно удивился, но переделывать всё-таки не стал.

stiglitZzz · 09.Январь.2017 19:51:09

Увидев,другие примеры,я так полагаю, за мой код , должно быть стыдно?

html,

body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:nth-of-type(n+2):nth-of-type(-n+3),
li:nth-last-of-type(n+1):nth-last-of-type(-n+5){
margin-left: -15px;
}

li:nth-of-type(n+1):nth-of-type(-n+3),
li:nth-last-of-type(n+1):nth-last-of-type(-n+5){
width: 36px;
height: 54px;
}

ul li:nth-of-type(4){
margin-right: 30px;
margin-left: 15px;
}

ul:first-of-type li:last-of-type,
ul:nth-of-type(2) li:nth-of-type(odd):not(:first-of-type):not(:last-of-type):not(.queen),
ul:nth-of-type(3) li:first-of-type,
ul:nth-of-type(3) li:nth-last-of-type(3)
{
background-color: #0099ff; /* blue */
}

ul:first-of-type li:nth-of-type(2),
ul:nth-of-type(n+3):nth-of-type(-n+4) li:nth-of-type(2){
background-color: #ff3300; /* red */
}

ul:last-of-type li:nth-of-type(3),
ul:last-of-type li:nth-last-of-type(4),
ul:last-of-type li:last-of-type{
background-color: #339933; /* green */
}

Ineska · 09.Январь.2017 19:59:14

Усложняете селекторы снова. Попробуйте разобрать любой код с фурума, проследите закономерности выбора карт.

stiglitZzz · 09.Январь.2017 21:18:13

вот,представим,реальные условия , в веб-разработке.(на что я и нацелен)
кто обычно выдвигает сроки ?
заказчик или согласовывается вместе с отделом веб-разработки(веб-разработчиком) ?
перспективней,

выполнять быстро задачу ? ( в данном случае , не обращать внимания на классы карт)
или все таки,максимально стараться оптимизировать код ?

или все по ситуации?
я представляю,что пример этого пасьянса,вероятно не применим к данному вопросу,но вот,предположим , что так?
p.s.
я выявил закономерности , по вашему совету и заметил,что я не придавал столько внимания классам(на какой то момент,даже вообще забыл,что это карты ),как автор , на мой взгляд - идеального кода,в третьем посте.
выглядит и читается - просто супер,я в восторге.

Sergey_Orlov · 01.Февраль.2017 21:27:58

НАчнем с того что это тут лишнее

:not(:nth-of-type(4))

мне кажется такое решение в целях обучения интересней )

   li:not(:nth-of-type(1)):nth-of-type(-n+3),
   li:nth-of-type(n+4)
{
       margin-left: -15px;    
}

inanutshell86 · 26.Февраль.2017 06:54:20

А не проще идти от того, что нужно выбрать один элемент, который НЕ таких размеров, как все остальные?

Jumpinjackflash · 03.Март.2017 21:38:28

Короткий вариант

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
}

body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}

.cards {
width: 500px;
}

.cards li::before {
font-family: “Courier”, monospace;
}

li:not(.nine):not(:first-of-type) {
margin-left: -15px;
}

li:not(.nine) {
width: 36px;
height: 54px;
}

li.nine {
margin-right: 30px;
margin-left: 15px;
}

ul:not(:last-of-type) li:not(.nine).diamond {
background-color: #0099ff;
}

ul:not(:nth-of-type(2)) li.seven {
background-color: #ff3300;
}
ul:last-of-type li:nth-of-type(3n) {
background-color: #339933;
}

Sergo_Venediktov · 06.Март.2017 10:19:44

Кто-нибудь может объяснить почему добавление части
:not(:first-of-type)
в правило
li:not(:nth-of-type(4)):not(:first-of-type) {
margin-left: -15px;
}

сдвигает в право все карты а не только первые карты в каждом столбце?

У меня без этой добавки не получалось выполнить задание. Различие было в том, что все карты были левее чем нужно.