Can you explain the significance of the "--" within CSS selectors?

My CSS skills are not the greatest and I stumbled upon a snippet of code that is puzzling to me.

.grid-product__title.grid-product__title--body:hover {
  text-decoration: underline;
}

I checked MDN and it usually defines a reusable property, like a variable, right?

But what does it mean when it is in the selector? Could it be a parent selector of 

.grid-product__title.grid-product__title
that underlines it when the parent body is selected or something like that? I am quite confused

Thank you very much :)

htmlcsscss-selectors

Answer №1

While many may think this is a unique concept to CSS, it actually derives from the BEM (Block, Element, Modifier) naming convention. In BEM, selectors are structured as BLOCK__ELEMENT--MODIFIER, so in the case of:

  • grid-product represents the block
  • title signifies the element
  • body acts as the modifier (though some argue it's more like an adjusted "modifier").

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code that deletes text from a document - Script eradication

I am trying to display the message "Todays Beer Style is: "Beer Style". However, when I add the javascript code, the "Todays Beer Style is:" text disappears. I'm not sure why this is happening. Below is the HTML code for reference. HTML Code <!DO ...

javascripthtml

Retrieve the genuine HTML code for a control directly on the client side

My goal is to retrieve the complete HTML text for a control from the client browser. This is important because certain information, especially the "Style," does not appear on the server side. How can I obtain the entire HTML text for a control? ...

c#htmlasp.net

Alter the URL for Jquery AJAX post by utilizing radio buttons

I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...

htmljqueryajaxradio-button

Instructions on how to delete a specific tag from a table using its ID

I have a complex HTML table generated by a PHP loop with multiple rows. My goal is to eliminate all the a tags within the td tag where the ID of the td tag is equal to 1 or another specified value. <table> <tr> <td>ID: 1</ ...

javascriptjqueryhtml

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

htmlcss

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

javascripthtmlarraysjsonlodash

My code written using Visual Studio Code is not displaying properly when I view it in my browser

I have been following along with a tutorial series that can be found at this link. This link will take you to the third video in the series, but I have also followed and programmed alongside the first and second videos. After installing Visual Studio Code ...

javascripthtmlcssvisual-studio-codesass

Struggling to connect with PouchDB within my HTML-based Web application

I am looking to integrate pouchDB into my WebApp so that upon clicking a button, the data from a JSON file will be saved to pouchDB. In the initial stage in my index.html, I included the following: <script type="module" src="pouchdb/packa ...

javascripthtmlnode.jscouchdbpouchdb

transforming a text input into unadorned plain text

Currently, I am in the process of creating a small HTML form that consists of a single textbox input. Once the user enters text into this textbox and clicks on a button located at the end of the page, I would like the textbox to transform into normal plain ...

javascriptjqueryhtml

Embed the Nest API into your HTML5 code

My mobile HTML5 application includes a script in the index.html file. Nest.js (code below) Whenever I run my application, I encounter an error stating that Firebase is not defined. This is odd because the function seems simple: --> var dataRef = new ...

javascriptnode.jshtmlfirebasenest-api

I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

I am facing an issue with a div and table on my webpage: <div id="tablediv"> <table id="table"> <tr><th>headers</th></tr> <tr><td>contents</td></tr> </table> <d ...

htmlcssbrowserprintingmedia-queries

I am experiencing issues with the Bootstrap responsive menu not functioning correctly on my template

While working on this Bootstrap 3 template, I observed that the default responsive menu is not functioning properly when I resize my browser for testing. I have previous experience designing responsive templates that work well, but this particular templat ...

htmlcsstwitter-bootstrapresponsive-design

Results not showing up

After attempting to incorporate the scores into a table, I am facing an issue where they are not displaying. Can anyone offer assistance with this problem? I am currently hosting on GitHub Pages. File: https://raw.githubusercontent.com/Eternal-Network/Ete ...

javascripthtmlhtml-table

Generate HTML output from the container element of a Vue application

On my HTML page, I have integrated a Vue application that consists of a single component. This application is attached to an element with the id paid-content. index.html <div id="paid-content"> <h2>You should see this if you' ...

htmlvue.js

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

htmlcssiconsmaterial-ui

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

Using React components to activate a click effect on the parent component

I have a React component called Card that has an onclick function triggered when the card is pressed. However, within this component, there are child elements such as sliders and buttons that perform their own actions. When clicking on these child elements ...

cssreactjs

Placing one element beside another element

I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box. Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/ Even after setting my image container to inl ...

htmlcss

Bootstrap implementation for personalized notifications

I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...

phpjquerycsstwitter-bootstrap