CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector?

The table structure looks like this:

<table border="1" width="560" cellspacing="0">
   <tr>
     <td height="28" colspan="3" bgcolor="#FFFFF...>
 </tr>
</table>

I am looking for a jquery or css selector that can be written in one line to specifically target the table with border=1

This table does not have any associated class or id, and accessing it through parent-child relationships is not an option

The goal is to find a selector that targets a table where the attribute border=1 (not inside a style="" tag), simply in the HTML markup itself

<table border=1"> ....</table>
jquerycsscss-selectorsjquery-selectors

Answer №1

Utilizing attribute selectors

[attr=value]

Denotes an element with an attribute name of attr and a value that is exactly "value".

table {
  width: 100%;
  height: 50px
}
table[border="1"] {
  background: red
}
<table border="1">
  <tr>
    <td></td>
  </tr>
</table>
<hr />
<table>
  <tr>
    <td></td>
  </tr>
</table>

Note: I recommend avoiding the use of the border HTML tag, as it is now deprecated. Instead, you can style the table with a border property in CSS.

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

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Exploring the integration of pre-defined Tailwind classes within Next JS development

As I transition my project from Vite JS to Next JS, I am currently facing an issue with importing Tailwind styles from a file. Even though the file is being read by my project, the styles are not being applied as expected. I'm wondering if there is a ...

cssnext.jstailwind-cssvite

ChooseMe date selector - eliminated the preset current date

I have implemented the PickMeUp multi date picker and here is my jQuery code. $('.multiple').pickmeup({ position : 'top', hide_on_select : false, mode : 'multiple' }); Currently, the calend ...

jquery

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

I have a question regarding creating a dynamically filling rounded button. I have successfully created an inner div inside the button with absolute positioning at the bottom. It works perfectly on Chrome webview, but I'm facing issues on Android 4.1. ...

androidcssangularjsionic-framework

combining: enhancing the value of the background-image property

Here is a mixin that I would like to modify: .a () {background-image: url(one.png);} I want to create a new class .b which inherits properties from .a, but also includes an additional background image layer, like this: .b { .a; ...

cssmixinsless

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus

I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...

htmlcssdropdown

Is jQuery still recommended for adding animations in VueJS?

In my component's methods object, I currently have the following code snippet: startImageAnimation() { $('.splash-image').fadeIn(1400, () => { setTimeout(function() { $('.splash-image').fadeOut(1400, () ...

javascriptjqueryvue.jstransitionvuejs2

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

How to use jQuery to parse and extract data from child elements

I'm struggling to make my script work properly. I want an alert to pop up when I click the button, while also keeping up with the changes happening to the XML on the same page. I thought this script would do the trick, but it seems like nothing happen ...

xmlajaxjqueryxml-parsing

Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...

htmlcssbootstrap-5

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

javascriptjqueryhtmlcss

What effect does setting div1 to float left have on the layout of div2 in css?

Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...

htmlcss

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

I recently added Twitter Bootstrap-Carousel to a website with the intention of using it to navigate through different sections of a module. However, I'm encountering an issue where setting the interval to false does not work as expected. When I set an ...

javascriptjqueryhtmltwitter-bootstrap

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

htmlcssxhtmlnewsletter

Tips for integrating jquery functions with angularJS?

I'm having issues with my accordion menu implemented using jQuery in my AngularJS application. Currently, it's not functioning as expected. I have made some changes in the CSS by commenting out the display: none; for .menu-navigation ul ul to dem ...

jqueryangularjs

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

htmlcsswordpressfont-awesome

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

phpjavascriptjqueryajaxpost

"Concurrency issues arise when using multiple AJAX calls in jQuery, causing confusion with

This piece of JavaScript code involves a series of AJAX calls to my FastCGI module in order to retrieve certain values. However, there seems to be an issue where the value intended for display in "div2" is ending up in "div1", and vice versa, ultimately ca ...

javascriptjqueryajax

The duplication and multiplication of margin-left is occurring

I am baffled by the fact that margin-left is only affecting certain elements and causing frustration. .setting-container { position: relative; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); } .setting-topnav { width: 100%; h ...

htmlcssmargin

Choose the initial search result without actually opening it using jQuery

I am working on an HTML file that contains multiple input fields, which get automatically filled when a corresponding item is selected from the auto-complete feature. Here is a snippet of my HTML code: <table class="table table-bordered"> <u ...

javascriptjqueryhtmljsonajax