Active page css class

CSS :active Pseudo Class

The :active pseudo-class is used to select and style the active link or any other element. It is activated by user.

An element becomes active when the user clicks on the link or the element and presses down the mouse button.

The :link, :hover, or :visited pseudo-classes override the style definethat is specified by the :active pseudo-class. For styling links appropriately, the :active rule must be placed after all other link-related rules (:link, :visited, :hover, :active).

On systems with multi-button mice, CSS3 defines that the :active selector should be applied only to the first button. But on right-handed mice, it should be applied to the leftmost button.

Version

Syntax

Example of the :active pseudo-class:

html> html> head> title>Title of the document title> style> a:active < background-color: #8ebf42; color: #666; > style> head> body> h2>:active selector example h2> a href="https://www.w3docs.com/">w3docs.com a> body> html>

Example of the :active pseudo-class with the tag:

html> html> head> title>Title of the document title> style> a < color: #1c87c9; > a:active < background-color: #8ebf42; color: #eee; > style> head> body> h2>:active selector example h2> p>Lorem Ipsum is simply dummy text of the printing and a href="#">typesetting a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into a href="#">electronic a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like a href="#">Aldus PageMaker a> including versions of Lorem Ipsum. p> body> html>

In the following example, click on the text to see how the color changes.

Example of the :active pseudo-class with the tag:

html> html> head> title>Title of the document title> style> div < padding: 30px; background-color: #8ebf42; color: #eee; > div:active < background-color: #666; color: #fff; > style> head> body> h2>:active selector example h2> div> Lorem ipsum is simply dummy text. div> body> html>

Источник

:active

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

Пример

Скопировать ссылку «Пример» Скопировано

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

 button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s;> button:active  color: white; background-color: purple;> button  padding: 2.5rem; border: 0; border-radius: 2.5rem; font-size: 2.5rem; background-color: #bada55; cursor: pointer; transition: background 0.3s, color 0.3s; > button:active  color: white; background-color: purple; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

К любому селектору добавляем двоеточие и ключевое слово active .

Селектор по тегу в состоянии :active

Скопировать ссылку «Селектор по тегу в состоянии :active» Скопировано

 a:active  /* Стили */> a:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу в состоянии :active

Скопировать ссылку «Селектор по классу в состоянии :active» Скопировано

 .link:active  /* Стили */> .link:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Составной селектор в состоянии :active

Скопировать ссылку «Составной селектор в состоянии :active» Скопировано

 li .link:focus  /* Стили */> li .link:focus  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по id в состоянии :active

Скопировать ссылку «Селектор по id в состоянии :active» Скопировано

 #id:active  /* Стили */> #id:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу и его псевдоэлемент в состоянии :active

Скопировать ссылку «Селектор по классу и его псевдоэлемент в состоянии :active» Скопировано

 .link::before:active  /* Стили */> .link::before:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

В момент нажатия на элемент при помощи кнопки мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active , который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Часто, если дизайнер не позаботился об отрисовке состояния :active для кнопок, можно задать стили сразу и для наведения курсора и для активного состояния:

 button:hover,button:active  /* Стили */> button:hover, button:active  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние :active . Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active .

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Источник

Highlight Current Page With HTML CSS JS | Show Active Link Or Menu

I am sure that, You have seen underline on the current menu or page on mostly all websites. When we click on any websites about then an underline appears on about menu ‘s bottom section. On some websites has any special effect to indicate the current opened menu or link.

Today you will learn how to show the active link, page, or menu with an underline. You can do this using HTML, CSS, & JavaScript, After learning this you can use it everywhere like on your website or blog. Just you have to change class and id values on your navbar then your website’s menu will be like this.

So, Today I am sharing Highlight Current Page With HTML CSS JavaScript. In other words, Show active link, menu, or page. This program is pure JavaScript based program, I did not use any library. Its is a tricky program, But if you have the capability to understand the code then you will get it. Otherwise, just copy the codes and change as you want.

If you are thinking now how this active link highlighter actually is, Then see the preview given below.

Preview Of Show Active Link Menu & Page

See this video preview to getting an idea of how this looks like.

Now you can see this visually. If you like this one then get the source code of its.

Discussion About Active Link Indicator

Before sharing source code, Let’s talk about it. I created two sections one for creating a menu and other section for its page. I gave id on pages and add the id on menu’s action. For example, I put home pages ID is id= «home-id» and put on Home menu < a href="#home-id">. Now when you click home on the menu section then its automatically navigate to the home page.

I used HTML Data attribute, The data-* attributes gives us the ability to embed custom data attributes on all HTML elements (more Info). In the menu section, we store data and give unique data id to every menu using data-tab-*. I created 7 menus I put A to G in data-tab, For example, data-tab-A for the first menu and data-tab-B for the second menu.

Now in the page section, I used data attribute with data-tab-panel value. In this section, I also used A to G alphabets. Then I choose the home menu and page to active by default by putting data-active-tab=»A» . In the CSS section, I put a line for a separate menu and pages. Between the menu and page section, I put the underline effect to create the highlight.

I put a span with 3px height with a color, It’s width is decided according to the menu’s words length using JavaScript. In the main section, I put overflow-x: scroll; and overflow-y: hidden; values, creating a scroll effect. Also I put .main-options::-webkit-scrollbar < display: none; >to hide scroll bar.

In JavaScript Section, I put all controls of styling. I created variable for each section, Then it’s changed according to the environment. I create a loop to check the width of the menu’s words length and change it dynamically. There are many more commands, I can’t explain it in writing, After getting the codes you will understand automatically.

Highlight Current Page With HTML CSS JavaScript Source Code

For Creating This Program You Have to Create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

Create an HTML file named ‘index.html‘ and put these codes given below.

Источник