CODEWITHSUNDEEP
htmlcsscss-selectors
user1410223
user1410223

Reputation:

CSS, selecting with specific Classes and types

I'm not expert with CSS, and I would like to select starting from the id without using JavaScript

Unfortunately the HTML code is autogenerated, I can't set some defined class...

Select id="main" -> class="ui-footer ui-bar-inherit ui-footer-fixed slideup" -> (select fisrt Div) -> (select first UL) -> (select class="ui-block-a") -> (select a)

Here my HTML code, what would I fill in where I have ??? in the style?

#main>??? {
  /*my CSS Code*/
}
<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Views: 142

Answers (3)

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

As I already mentioned. It really depends whether you can actually influence the outcome of your html-generator or not.

If you can then just adding a specific class would probably be the way to go. Otherwise, I advise you to use classes instead of ids for the styling.

You only have to be as specific as it is required for the style to work. If one style is more specific than the other style it will be overridden. Selectors such as + or > etc. add more "power" to the rule. Most of the time it is enough to only combine a few selectors to reach your goal.

The thing is also: You don't want to rely on your html-structure too much in order to have a decent styling. In fact, with classes, you can use pretty much all elements in any order.

.ui-block-a a {
  color: green;
}
<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

ikiK
ikiK

Reputation: 6532

You can do it just like you wrote it...

You can probably skip few things in between, depends on live usage code.

#main .ui-footer.ui-bar-inherit.ui-footer-fixed.slideup div:first-of-type ul:first-of-type .ui-block-a a{
  color: red !important;
}


#main .ui-footer.ui-bar-inherit.ui-footer-fixed.slideup div:first-of-type ul:first-of-type .ui-block-a a{
  color: red !important;
}
<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 2

mplungjan
mplungjan

Reputation: 177691

You can skip a lot of classes

#main .ui-block-a a {
  color:red
}
<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions