Identical identification with matching attributes

I have successfully integrated Popeye slider to display images. However, whenever I need to create a new slider show, I find myself duplicating all the CSS content to another ID. For example:

 #ppy1 .ppy-extcaption {
     width:          240px;
     display:        block;
}
 #ppy4 .ppy-extcaption {
     width:          240px;
      display:        block;
}
#ppy5 .ppy-extcaption {
      width:          240px;
      display:        block;
}

Is there a way to create different IDs with the same properties without duplicating so much CSS code?

Thank you. Sorry for any mistakes in my English.

jquerycss

Answer №1

To implement the styling, simply apply the class

.custom-extcaption {
     width:          240px;
     display:        block;
}

You can also utilize them in this manner:

#example1 .custom-extcaption, #example4 .custom-extcaption, #example5 .custom-extcaption
{
     width:240px;
     display:block;
}

Answer №2

#abc123 .abc-extcaption,
#def456 .def-extcaption,
#ghi789 .ghi-extcaption
{
     width:200px;
     display:block;
}

Alternatively, if you are certain that the class extcaption is unique to this section of your code, you can simply refer to the class:

.abc-extcaption
{
     width:200px;
     display:block;
}

Answer №3

Try this out:

[id*=ppy] .ppy-extcaption{
     width: 240px;
     display: block;
}

Latest Update

[attr^=value] denotes an element with an attribute name of attr and a value that starts with "value".

[attr*=value] denotes an element with an attribute name of attr and a value that contains the string "value".

source

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

The JSONP file can be successfully retrieved through an AJAX request in the console, however, the data does not display when attempting

Currently attempting to send an ajax request utilizing the following code snippet: $.ajax({ url: "http://mywebsite.com/blog/json", dataType: "jsonp", jsonpCallback: "jsonpCallback" }); function jsonpCallback(data) { console.log(data); } E ...

javascriptjqueryajaxjsonp

How come my gifs appear tiny even though I've adjusted their width to 32% each?

I am trying to display three gifs in a row, each taking up one-third of the width of the page. However, when I preview the page, the gifs appear tiny. I have set the divs to 32% each and the gifs should fill 100% of their respective div. Here is the code s ...

htmlcss

Analyzing comments on Facebook

My goal is to extract data from FB comments JSON by accessing data.id. var url = http://graph.facebook.com/comments?id={{ url_of_the_page }} Utilizing jQuery, I aim to retrieve data.id and other elements by: $j.getJSON(url, function (item) { ...

jqueryfacebook-graph-api

What steps should I take to ensure that the login page functions properly?

Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...

javascriptphphtmlcssauthentication

Using console.log() within a method while chaining in JavaScript/jQuery

I've been experimenting with developing jQuery plugins and I'm interested in chaining methods. The jQuery tutorial (found here: https://learn.jquery.com/plugins/basic-plugin-creation/) mentions that you can chain methods by adding return this; at ...

javascriptjquerypluginschainingmethod-chaining

Dividing an interface into four sections with jQuery Mobile

Currently, I am working with jQuery mobile and attempting to divide the page into four sections(Fiddle) with header and footer included. Unfortunately, I am facing some issues with this setup.. Check out my Fiddle here <!DOCTYPE html> <html> ...

jqueryhtmlcssjquery-mobile

Tips for adding and removing active class with navbar links using JavaScriptonclick

I need help with toggling the "li-active" class on my navigation bar links. Currently, when I click on a link, the "li-active" class is transferred from the previous link to the newly clicked link instead of removing it first. Can someone please assist me ...

javascripthtmlcss

Scroll event not triggering in Angular Material

I've encountered an issue while creating an angular app using angular material that involves a scroll event. The setup of my app includes a fixed left sidenav and content on the right. Despite trying to inspect the scroll on the right content, I have ...

javascriptjqueryangularjsangular-material

Is your div not loading correctly due to JQuery or Javascript?

PHP Version 7.0 JQuery Version 3.1.0 It is noticeable that the content above gets copied and pasted every five seconds instead of refreshing. The aim is to refresh the include every five seconds. Website: Code: <!doctype html> <html><h ...

javascriptphpjqueryhtml

Animate.css: activate animations upon entering the viewport during scrolling

I'm currently testing out animate.css for my project. Here's a snippet of my code: <h2 class="lazyload animate__animated animate__rotateInDownLeft" data-link="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min ...

cssanimate.css

Want to learn how to display a description below a photo when you hover over it in a photo gallery?

I am currently creating a basic photo gallery where hovering over a thumbnail displays an enlarged photo below it. My goal is to also have text displayed inside a white text box when hovering over each thumbnail, with unique descriptions for each. I need ...

javascripthtmlcss

Navigating HTML Wordpress code for beginners

I am currently working on a project for my studies, creating a WordPress website. In order to pass the W3C HTML & CSS validation check, I need to edit the code to fix errors and warnings that are popping up. #1 Initially, I attempted to use the Appeara ...

phphtmlcsswordpresswordpress-theming

The header is visible above the navigation bar when scrolling on mobile, but it should be hidden

I am facing an issue with fixed content on mobile positioned above a Bootstrap navbar. The problem arises when scrolling down, causing the navbar to move up by 50px (the height of the content above the navbar). Everything seems to work fine initially, but ...

jqueryhtmlcss

The Raphael gradient background does not display properly on IE7 and IE8 when applied to a path object

Here is a JavaScript code snippet: $(document).ready(function() { var paper = new Raphael(document.getElementById('canvas_container'), 1000, 1000); var tetronimo = paper.path("M 700 700 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 ...

javascriptjqueryraphael

In order to implement the functionality in JavaScript, the .slider::-webkit-slider

I need to create a slider that adjusts the size of the dot based on the value input. For example, when the value is 1, the dot size should be 10px and for a value of 100, it should be 100px. Is there a way to dynamically change the height of .slider::-web ...

javascripthtmlcsswebkit

Styling Descendants Conditionally in Angular 2

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; } <div class="parent"> Parent <div>Child <div>GrandChild</div> </div> </div> Imagine a scenari ...

cssangularng-classng-style

"Troubleshooting an Index Error When Using PHP POST Method with AJAX

On my personal computer, I am attempting to store data from a JSON file into my MySQL database using Wampserver. Within my HTML page (saveInfo.php), I have included the following jQuery code: <script type="text/javascript"> var jsObj = ...

phpjqueryajax

Obtaining DOM element generated through jQuery's .load() method

I am striving to fetch an array of data from a MySQL database using PHP for the purpose of utilizing it in a JavaScript function; graph() as illustrated below. My approach involves loading the required data into a DOM element. Although the query is succes ...

phpjquery

Encountering issues with the functionality of select2 and jquery validation

Having trouble implementing validation on select2 with a few issues : The error message displays, but it does not disappear when a valid entry is made. I am loading an initial value which works fine... however, the validator does not recognize the va ...

jqueryjquery-validatejquery-select2

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

htmlcss