What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.).

Here is my HTML:

<h2><a id="hover-1" href="">Hover Effect 1</a></h2>
<h2><a id="hover-2" href="">Hover Effect 2</a></h2>
<a href="" id="play">Play</a><br/>
<a href="" id="picture">Picture</a><br/>

And here is the CSS:

<style>

/* Gradient*/
body {
  padding: 3em;
}
#play {
  color: blue;
  font: bold 3em/1.5 , sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: .2s;
}
#play:hover {
  color: hotPink;
}
@media (-webkit-min-device-pixel-ratio:0) {
  #play {
    background-color: skyBlue;
    background-image: -webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%);
    background-position: 100% 0;
    background-size: 200% 200%;
    color: transparent;
    -webkit-transition: .1s .2s;
    -webkit-background-clip: text;
  }
  #play:hover {
    background-position: 0 0;
    color: transparent;
    transition: .4s 0;
  }
}

/*Box Border*/
html {
  box-sizing: border-box
}
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  width: 80%;
  margin: 50px auto;
  color:black;
  font: 16px/1 'Catamaran', sans-serif;
  background: transparent;
}
body:after {
  content: '';
  display: flex;
  clear: both;
}


h2 {
  width: 50%;
  text-align: center;
  height: 44px;
  line-height: 24px;
  font-weight: 400;
  
}
@media screen and (max-width: 768px) {
  h2 {
    width: 100%;
  }
  h1 {
    margin-bottom: 15px;
    line-height: 30px;
  }
}

a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px;
}
a:before, a:after, a > span:before, a > span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

#hover-1 {
  padding: 10px;
}
#hover-1:before, #hover-1:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: black;
}
#hover-1:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
#hover-1:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
#hover-1:hover:before, #hover-1:hover:after {
  transform: scale(1, 1);
}

</style>

I attempted to add both IDs to all of the CSS like this:

#play, #picture {
  color: blue;
  font: bold 3em/1.5 , sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: .2s;
}

But that didn't work for some reason. If you can offer assistance, thank you! Feel free to reach out with any questions!

htmlcss

Answer №1

This particular issue arises from the following:

@media (-webkit-min-device-pixel-ratio:0) {
  #play {
    background-color: skyBlue;
    background-image: -webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%);
    background-position: 100% 0;
    background-size: 200% 200%;
    color: transparent;
    -webkit-transition: .1s .2s;
    -webkit-background-clip: text;
  }

The minimum ratio defined in 

@media (-webkit-min-device-pixel-ratio:0)
is set at 0, ensuring that #play will always maintain this styling. You have the option to either incorporate #picture into this styling or eliminate it and add #picure to the following code block:

#play, #picture {
  color: blue;
  font: bold 3em/1.5 , sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: .2s;
}

Complete CSS code snippet:

/* Gradient*/
body {
  padding: 3em;
}
#play, #picture {
  color: blue;
  font: bold 3em/1.5 , sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: .2s;
}
#play:hover {
  color: hotPink;
}
@media (-webkit-min-device-pixel-ratio:0) {
  #play:hover {
    background-position: 0 0;
    color: transparent;
    transition: .4s 0;
  }
}
#picture:hover {
    background-position: 0 0;
    color: transparent;
    transition: .4s 0;
  }
}

/*Box Border*/
html {
  box-sizing: border-box
}
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  width: 80%;
  margin: 50px auto;
  color:black;
  font: 16px/1 'Catamaran', sans-serif;
  background: transparent;
}
body:after {
  content: '';
  display: flex;
  clear: both;
}


h2 {
  width: 50%;
  text-align: center;
  height: 44px;
  line-height: 24px;
  font-weight: 400;
  
}
@media screen and (max-width: 768px) {
  h2 {
    width: 100%;
  }
  h1 {
    margin-bottom: 15px;
    line-height: 30px;
  }
}

a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px;
}
a:before, a:after, a > span:before, a > span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

#hover-1, #hover-2 {
  padding: 10px;
}
#hover-1:before, #hover-1:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: black;
}
#hover-1:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
#hover-1:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
#hover-1:hover:before, #hover-1:hover:after {
  transform: scale(1, 1);
}
#hover-2:before, #hover-2:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: black;
}
#hover-2:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
#hover-2:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
#hover-2:hover:before, #hover-2:hover:after {
  transform: scale(1, 1);
}

UPDATE: Adjusted CSS per the comment

Answer №2

Utilizing the selector syntax provided should function effectively, as demonstrated in this scenario:

#elem1, #elem2 {
  color: red;
}
<div>
  <p id="elem1">Element 1</p>
  <p id="elem2">Element 2</p>
</div>

However, keep in mind that the purpose of ids is to uniquely identify an element and its corresponding style. If you need to apply the same styles to multiple elements, it's advisable to utilize a class. You can still assign a unique id alongside a class, like this:

.text {
  color: red;
}

#elem1 {
  font-size: 18px;
}
#elem2 {
  font-size: 14px;
}
<div>
  <p class="text" id="elem1">Element 1</p>
  <p class="text" id="elem2">Element 2</p>
</div>

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

Adjust Javascript to modify the URL by assigning a new URL without utilizing the origin as the parent

Currently, I am working on a script that is responsible for sending string values to the server in order to change the ipv4 information on a specific device. However, I am facing some difficulties and would appreciate some assistance with automatically upd ...

javascriptajaxhtmlgoogle-chrome

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

Execute a JavaScript function on a Node server following a click event in an HTML document

Hello everyone, I am currently working on a project using node.js in a Windows environment. With the help of the express module, I am trying to create a static page that includes a Submit form. When someone clicks the "Submit" button, I intend to execute a ...

javascripthtmlnode.jsexpress

rearranging items from one list to another list

I've encountered an issue in my HTML code that I need help with. I have included some classes for clarity, but their specific names are not essential. My goal is to make the "sub-nav" element a child of the "mobile parent" list item on mobile devices. ...

javascripthtml

How to add a checkbox to an HTML form with QT

I am looking to add a checkbox in an HTML code using QT. I have successfully created an HTML using QTextEdit and QTextCursor, but I am unsure of how to insert a checkbox. If anyone has experience with solving this issue, please provide me with some guidan ...

htmlqtcheckbox

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

Encountering issues with website optimization on Google Page Speed Insights and facing compatibility problems on a specific website I designed

I attempted to analyze the performance of my website using Google Page Speed Insights and encountered an error message. I have tried looking for a solution without success. Interestingly, when I tested other websites that I manage, everything worked just ...

htmlcssbootstrap-4google-pagespeed

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...

jqueryhtmlcss

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

htmlcss

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload

Can users be prevented from bookmarking a particular web page?

I'm working on a Python (Django) webpage and I need to prevent users from being able to bookmark a certain page. Is there a way to do this? ...

javascriptpythonhtml

Creating a tree with branches using divs: a comprehensive guide

I have been tasked with designing a tree structure for a project that will visually represent the results of a quiz. The tree needs to have branches on both sides, featuring 4 main branches, each with 5 smaller branches extending from them. Additionally, I ...

htmlcss

Is there a way for me to extract the content from a table within an HTML document?

My goal is to extract data from , specifically focusing on the placement and points earned by a specific player. Upon inspecting the HTML code of the website, I located the details related to the player "Nickmercs" as follows: HTML Text The rank was displ ...

pythonhtmlweb-scraping

When an element possesses a particular class, modify the css styling of a different

My menu is an unordered list, with each menu item gaining the "active" class when clicked. This works perfectly fine. However, I have an arrow positioned absolutely and its "top" style needs to change based on which list item has the "active" class. Curr ...

jqueryhtmlcssconditional-statements

Using PHP code to properly display formatted XML content within a `pre` HTML tag

Can anyone help me with formatting the XML syntax that is shown in a pre tag on my sandbox website? If you have any solutions, please share them with me. ...

phphtmlsyntax-highlightingpre

Looking to implement a condition that prevents the echoing of HTML code when a certain template ID is selected?

Struggling with inherited PHP MVC code for a website, I encounter an issue on a specific page where unwanted code is echoed out. To prevent this, I aim to skip the echoing when a specific templateID (which I set as default) is selected. However, I'm u ...

phphtmlsql

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Utilizing the Ace Editor (through Brace and React-Ace) is a key aspect of my project. In our implementation, we specify the editor's mode as "css" and integrate it into our webpage. While this setup functions correctly, we have observed that some of ...

javascriptcssace-editorreact-ace

What impact will splitting a single file into multiple files have on the overall performance of the website?

Imagine having an index.php file that includes multiple other files: Contents of index.php --------------------------- include('header.php'); include('footer.php'); --------------------------- Contents of header.php ------------------ ...

phphtmlcssperformanceinclude