Capybara: identifying CSS that contains a specific attribute with no value associated (for example, finding <img alt>, but not <img alt=""> or <img alt="x">)

Following the update of Pandoc from v1.19 to 2.9, I find myself in need of making changes to some of my specifications.

In the past, the following assertion was valid:

expect(page).to have_css('.figure img[src="decorative-image"][alt=""])'

Now it fails because the HTML output no longer includes 

<img alt=""></code>, but rather <code><img alt>
.

I am unsure how to adjust the CSS selector to target <img alt>, without matching 

<img alt=""></code> or <code><img alt="x">
.

Any guidance would be greatly appreciated.

cssruby-on-railscapybara

Answer №1

It seems that CSS no longer allows for not specifying a value for an attribute in the browser because it is interpreted as an empty string according to https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:

Empty attribute syntax
The attribute name alone implies an empty string as the value.

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 positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: https://hookandbarrelrestaurant.com/ Here is my code: https://codepen.io/Dhaval182/pen/rQPMoW ...

javascriptjqueryhtmlcss

Incorporate CSS and JavaScript files into every page of NetSuite

Is there a way to globally apply a CSS file or JavaScript code to all NetSuite pages in order to change the page direction to RTL? I attempted adding it through: SuiteScript >> Client >> Deployment : All Records, While I was able to successfu ...

cssnetsuitesuitescript

Adjust the height and eliminate gaps between rotated divisions

I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the heig ...

htmlcss

Safari's Styling Struggles

I've been diligently working on a website for some time now, conducting the majority of my testing in Chrome, Firefox, and IE. However, as I near completion, I've run into an issue when viewing the site in Safari on Mac, iPad, and iPhone. I' ...

csslayoutmobilesafaristyling

The expected behavior of first-child is not impacting the initial element as anticipated

What is the reason behind the rule not impacting the first div containing the "update 1" text? .update div { width:100%; height:25%; border-top:1px dashed {color:background title}; padding: 5px; color:{color:links nav}; cursor:po ...

csscss-selectors

Having trouble getting CSS headers to work smoothly with iPhone?

After creating a web application with CSS, the initial GUI was exactly how I wanted it to be. However, within 3 seconds of loading the page, the GUI would change. The HTML code for my header is as follows: <div id="Slideshow"> <img src="image/s1 ...

htmliosiphonecss

Elements with absolute positioning are preventing drag events from executing

Struggling to create a slider and encountering an issue. The problem lies in absolute items blocking slider drag events. I need a solution that allows dragging the underlying image through absolute positioned items. Any ideas on how to achieve this? MANY T ...

javascriptcssvue.jsdraggabledrag

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

javascriptjquerycsstampermonkey

"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the div ...

jqueryhtmlcssfade

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

jquerycssmenu

Is there a way to compress my JavaScript and CSS files using gzip?

I am facing an issue with gzipping a prototype library. I have no idea how to go about it, where to start, and how it actually works. I tried looking at some tutorials but unfortunately, they weren't very helpful... So here's the setup: I have ...

javascriptcssapachehttpgzip

Tips for deleting a CSS class from a Wicket element

If you're looking to dynamically update a CSS class of a component in Java code, one way to do so is by using an AttributeAppender: component.add(new AttributeAppender("class", true, new Model<String>("foo"), " ")); You can also utilize a util ...

javacsswicket

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

javascripthtmlcssvue.jsmaterial-design-lite

What causes my CSS styles to vanish upon refreshing the page in Next.js?

After setting up a CSS folder within my app directory and importing the files into components for use, I noticed that the styles are applied initially. However, upon refreshing the page, they all disappear. I attempted to resolve this issue by going back ...

cssnext.jsjsxrefresh

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

There are no definitive answers to the questions regarding this issue. Some suggest stopping zoom altogether, while others recommend setting the width, which may not always solve the problem. I am working on a web application designed for mobile use with ...

javascriptcssmobile

Exploring an illustration of Bootstrap

As a newcomer to html and css, I am currently working on building a website using the following example template: http://getbootstrap.com/docs/4.1/examples/dashboard/. My issue is that when I zoom in by pressing cmd + '+' or Ctrl + '+', ...

cssbootstrap-4

Flexbox that adjusts to any browser height, ensuring full responsiveness

I am exploring the world of flexbox with the goal of creating a responsive layout consisting of 3 items that adjust seamlessly to different devices such as smartphones, tablets, and desktop computers. The layout should stack the items on top of each other ...

htmlcssflexboxresponsive-design

Toggling a div overlay through various user interactions such as clicking, pressing a button, or hitting the escape

I've created a simple div overlay that appears when a user clicks inside an input box: HTML <html> <body> <input id="search" type="text" placeholder="Search..."> </body> </html> CSS #overlay { position: fixed; ...

jqueryhtmlcssshow-hide

Responsive Bootstrap dropdown menu adjusts its size when clicked

I'm currently in the process of creating a basic navbar that includes a drop-down menu on the far right side, as depicted here: https://i.sstatic.net/hs9us.png The issue I'm facing is that when I click on the dropdown, the navbar automatically ...

htmlcssbootstrap-4navbar