The enigma of navigating CSS selectors: the > symbol, #id element, and

I am facing an issue with the hover color of my buttons. One of them has a different color, so the hover effect I chose for the rest doesn't quite work with that button. To resolve this, I decided to create an #id specifically for that button. Here is the CSS and HTML code:

Just to clarify, .boutonsim is the class for all buttons, while #boutonachat is the id for the specific button in question.

Despite creating the id, it seems to have no effect and I'm unsure about the syntax to make it work.

.boutonsim { /*construction d'un bouton avec faux fond*/
    display: block;
    height: 45px;
    width: 150px;
    position: absolute;
    top: 1.9em;
    z-index: 1;
    font-size: 16px;
}

.top-container > button {
    display: block;
    width: 150px;
    height: 45px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
    font-size: 16px;
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 1.9em;
    padding: 0;
}


.top-container > button:hover {
    color: brown;
}

.top-container > button:hover {
    color: rosybrown;
}

HTML

        <div class="top-container">
        <img id="img2" src="images/haut.png" />
        <img id="title" src="images/nom.png" />
        <img id="logo" src="images/LOGO.png" />

        <div class="boutonsim" style="right: 80px;" name="boutonachat"> <!--image-->
            <img src="images/clipart/boutonORIGINALachat.png" /> <!--vrai bouton-->
        </div>
        <button id="boutonachat" style="right: 80px;">Billets</button>

        <div class="boutonsim" style="right: 280px;" name="boutonculture"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 280px;">Culture</button>

        <div class="boutonsim" style="right: 480px;" name="boutonpaysages"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 480px;">Paysages</button>

        <div class="boutonsim" style="right: 680px;" name="boutonaccueil"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 680px;">Accueil</button>

    </div>
htmlcsscss-selectorshover

Answer №1

When referring to an ID in CSS, it is important to use a "#" symbol, unlike using a "." which is used for classes.

In simple terms, in order to continue with your style declaration and see actual results, you should write:

#boutonachat { /*creating a button with fake background*/
    display: block;
    height: 45px;
    width: 150px;
    position: absolute;
    top: 1.9em;
    z-index: 1;
    font-size: 16px;
}

Adding inline styling for color:

<button style="right: 80px; background-color: red;">Tickets</button>

Answer №2

To achieve varying colors, a helpful way is to utilize the CSS selector ""button:nth-of-type(1):hover"

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

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

htmlcss

Is there a way for me to prioritize the sidebar over the main content on the page

My theme is efficient and visually appealing, but there's one issue with the mobile layout - it displays the sidebar after the content. How can I rearrange this in my theme so that the sidebar appears before the content? Thanks for your help! ...

csswordpresssidebar

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

javascripthtmlcssanime.js

Using d3 to create an SVG with a Bootstrap dropdown feature

I am seeking to create a graph that is not a tree, as some nodes may have multiple parents. When a node on the graph is clicked, a dropdown menu should be displayed with a list of text options. Though I am new to d3.js, I have observed examples of bootstra ...

javascripthtmld3.jssvgbootstrap-4

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

Arrange a jQuery table by a column containing version details

I'm working with a table that includes a column for version numbers. The challenge is that even though 1.1 and 1.10 are different versions, they are treated the same as numbers. So, in order to properly sort them, I need to separate the numbers on eit ...

jqueryhtmlsorting

Having trouble making SCSS mixins work with CSS variables in NextJS?

My current next.config.js setup looks like this: module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./styles'], ...

csssassnext.js

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...

javascriptpythonhtmlajaxflask

What could potentially occur if the sourcemap is configured to false within an Angular application?

Recently, I began learning Angular. While exploring my project files, I came across the sourcemap option in the tsconfig.json file, which is set to "sourceMap": true by default. I stumbled upon a helpful link on Stack Overflow that clarified some of my dou ...

htmlnode.jsangulartypescriptangular-cli

Include the name of the uploaded attachment in the textarea before hitting the submit button

Is there a way to automatically insert the filename into a textarea before the user submits the form? Can this be achieved using PHP or JavaScript? Thank you. <form id="Apply" name="Apply" method="post" enctype="multipart/form-data" action="applyLea ...

javascriptphphtml

What is the process for implementing hover transitions on link elements?

I am trying to incorporate a transition effect for my links. Essentially, I want the text-decoration (which is currently set to underlink) to gradually appear. Unfortunately, my previous attempt at achieving this has been unsuccessful: #slink{ transit ...

htmlcss

How can I auto-resize an embedded HTML document within another?

I have a collection of HTML help files that I need to consolidate into one large file for printing at the request of my boss. My plan is to simply embed them all in a single HTML page and have the <object/> automatically resize to fit the entire page ...

html

Hide the element once the CSS animation has finished

I have successfully implemented an animation using pure CSS that starts on load. However, I am facing an issue with both opacity and visibility as the div continues to take up space even when hidden. Question Is there a way to make the div disappear comp ...

cssanimationtimecss-animationsdisplay

Carousel With Multiple Items Displayed Simultaneously In Bootstrap

Is there a way to create a carousel with multiple items in Bootstrap 4? The documentation talks about multiple carousels, but not specifically about how to display multiple items within a carousel. ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Tips for animating slider elements that are not set to absolute positioning

I'm currently working on implementing an animated slider for my website. I have been using floats and margins to position the elements of the slider, but now I want to find a way to incorporate animations without having to use CSS3 transitions with ab ...

jquerycssanimationjquery-animate

Tips for individually collapsing dynamic accordion panels within a Vue.js v-for loop

Is there a way to collapse accordions individually that are created inside a Vue.js v-for loop? I believe assigning a dynamic id to each accordion will help with this, but I am not sure where to add this id. Below is my HTML code: <div role="tablist"& ...

htmlvue.jsbootstrap-vue

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

javascriptphpmysqlcss

Receiving duplicate data on WordPress pages

I have made some changes to my theme page.php: <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <header class="entry-header"&g ...

phphtmlwordpress

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

csshtml