Jump to content
  • Sign Up
  • 0

Как применить свойство к родительскому элементу?


SergeAnt
 Share

Question

Пытаюсь отформатировать ссылку в ячейке таблицы (сдвинуть вправо, и т.п.).
Дописать стрелку к надписи получается, но сдвинуть её - нет.
Если я правильно понимаю, из-за того, что тэг <a> - строчный контейнер, и свойство надо бы применить к ячейке таблицы, но ищем мы гиперссылку.
 

<tr>
        <td width="30%"><a href="/news/2948/">Подробнее&nbsp;</a></td>
</tr>

CSS:
 

/* пририсовываем к надписи стрелочку, работает */
td a::after {
        content: '\A0\21D2';  
}
/* пытаемся выровнять по правому краю - не работает */
td>a:link { 
        text-align: right;
        font-weight: bold;
}

Может есть какой-то способ отформатировать ячейку / ссылку? 

Вторая идея - искать элемент по его содержанию (т.е. слову "Подробнее"), тоже нереализуема?  CSS ищет только по свойствам/атрибутам?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
11.06.2021 в 17:16, Igor Schnaider сказал:

Свойство выравнивания нужно назначить самой ячейке, а не ссылке.

Это понятно, но как это сделать? Как выбрать ячейку, в которой есть ссылка?
Это возможно в принципе средствами CSS?

Link to comment
Share on other sites

  • 0
18.06.2021 в 02:11, Igor Schnaider сказал:

Ну, если они у вас все в одной колонке, то nth-child(N) можете использовать.

Приходится так выкручиваться, если других вариантов не видно.
Но идея была форматировать ячейки с ссылками, а не третьи строчки. 
Понятно, спасибо за помощь 

Link to comment
Share on other sites

  • 0

Почему бы просто не сделать:
 

td a {
        position: relative;
}
td a::after {
        position: absolute;
        right: 0;
}

И извращайтесь с этим псевдоэллементом(стрелочкой) дальше как хотите:)
Ну, и не забудьте ж на всякий a сделать display: block и на всякий, задать ширину с высотой. И будет ништяк.

Edited by Alarr
Link to comment
Share on other sites

  • 0
13 часов назад, SergeAnt сказал:

Но идея была форматировать ячейки с ссылками, а не третьи строчки.

Ну в будущем, когда добавят поддержку для :has, можно будет его использовать.

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

Link to comment
Share on other sites

  • 0
19 часов назад, Alarr сказал:

И извращайтесь с этим псевдоэллементом(стрелочкой) дальше как хотите:)
Ну, и не забудьте ж на всякий a сделать display: block и на всякий, задать ширину с высотой. И будет ништяк.

Правильно ли я понял, что эта конструкция сдвигает вправо только стрелку, которую я дописываю к слову "Подробнее"?  У меня задача проще - сдвинуть вправо ссылку целиком вместе со стрелкой. 
Иными словами, Вы предлагаете вместо text-align: right; использовать position: absolute; right: 0; ?
Мне кажется, это самый оптимальный вариант. 

 

11 часов назад, Igor Schnaider сказал:

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

Ну, это слишком очевидный и прямолинейный подход ;)  Мы лёгких путей не ищем ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy