Why do .gallery .photos img properties override those in .showed (HTML/CSS3)?

Question

SQL

why do .gallery .photos img properties override properties that are in .showed (HTML/CSS3) ?
https://codepen.io/freelancetesting/pen/LYEzgRr
I don't understand exactly why you can't access the properties directly through the class, I understand that the .gallery .photos img properties override the properties that are written in .showed , I don't understand that is why it is impossible to directly reach the properties of the class, and as a result, write .gallery .photos img.showed a whole chain (sequence) in order for the properties to work. I don't understand the mechanics of this behavior.

Answer 1

Created the categories, main tables and populated them

-- -- -- spoiler: SQL for creation and filling -- -- --

-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Хост: 127.0.0.1:3306
-- Время создания: Мар 11 2019 г., 14:41
-- Версия сервера: 5.5.61-MariaDB
-- Версия PHP: 5.6.38

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;
/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;
/*!40101 SET @[email protected]@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- База данных: `test`
--

-- --------------------------------------------------------

--
-- Структура таблицы `categories`
--

CREATE TABLE `categories` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `en` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Дамп данных таблицы `categories`
--

INSERT INTO `categories` (`id`, `name`, `en`) VALUES
(1, 'большой', 'big'),
(2, 'красный', 'red'),
(3, 'ровный', 'smooth');

-- --------------------------------------------------------

--
-- Структура таблицы `main`
--

CREATE TABLE `main` (
  `id` int(11) NOT NULL,
  `simple` varchar(255) NOT NULL,
  `genre` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Дамп данных таблицы `main`
--

INSERT INTO `main` (`id`, `simple`, `genre`) VALUES
(1, 'Какой-то', 'red'),
(2, 'текст', 'red'),
(3, 'для', 'red'),
(4, 'проверки', 'red'),
(5, 'запроса', 'red'),
(6, 'типа red', 'red'),
(7, 'my dick', 'big'),
(8, 'is big', 'big'),
(9, 'my dick', 'big'),
(10, 'is very big', 'big'),
(11, 'Little', 'big'),
(12, 'Big', 'big'),
(13, 'Group', 'big'),
(14, 'Track', 'big'),
(15, 'Big Dick', 'big'),
(16, 'Вообще', 'smooth'),
(17, 'Вообще', 'smooth'),
(18, 'не', 'smooth'),
(19, 'имею', 'smooth'),
(20, 'малейшего', 'smooth'),
(21, 'понятия', 'smooth'),
(22, 'что', 'smooth'),
(23, 'тут', 'smooth'),
(24, 'написать', 'smooth'),
(25, 'для', 'smooth'),
(26, 'теста', 'smooth'),
(27, 'но', 'smooth'),
(28, 'и', 'smooth'),
(29, 'так', 'smooth'),
(30, 'сойдет', 'smooth');

--
-- Индексы сохранённых таблиц
--

--
-- Индексы таблицы `categories`
--
ALTER TABLE `categories`
  ADD PRIMARY KEY (`id`);

--
-- Индексы таблицы `main`
--
ALTER TABLE `main`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT для сохранённых таблиц
--

--
-- AUTO_INCREMENT для таблицы `categories`
--
ALTER TABLE `categories`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT для таблицы `main`
--
ALTER TABLE `main`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=31;
COMMIT;

/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;
/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;
/*!40101 SET [email protected]_COLLATION_CONNECTION */;

And in this way I pulled out the data I needed.

SELECT
  m.id as main_id,
  m.simple as main_simple,
  m.genre as main_genre,
  c.id as categories_id,
  c.name as categories_name,
  c.en as categories_en
FROM 
  main m
  LEFT JOIN categories c on m.genre = c.en
WHERE 
  c.en LIKE '%big%'

LIKE '%big%'
LIKE '%red%'
LIKE '%smooth%'
This method works on both MySQL and PostgreSQL, if anyone is interested.

Are the categories separated by commas in the categories table?
Bring the tables into normal form and you will be happy.

Correctly implement a many-to-many relationship
like this
PS Well, in extreme cases, you can try this

select f.id,f.title_ru,f.genre from main as f  where genre like (select '%' || name || '%' from categories where en = 'big');

The point is the weight of the selector.
The .gallery .photos img has more weight than just the .showed class.
If you need to use only the .showed class, then you can add !important to all the properties that it overwrites. For example opacity: 1!important;

Answer 2

Are the categories separated by commas in the categories table?
Bring the tables into normal form and you will be happy.

Answer 3

Correctly implement a many-to-many relationship
like this
PS Well, in extreme cases, you can try this

select f.id,f.title_ru,f.genre from main as f  where genre like (select '%' || name || '%' from categories where en = 'big');

Answer 4

The point is the weight of the selector.
The .gallery .photos img has more weight than just the .showed class.
If you need to use only the .showed class, then you can add !important to all the properties that it overwrites. For example opacity: 1!important;